@malloy-publisher/sdk 0.0.30 → 0.0.32

package/src/components/Package/Notebooks.tsx

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

package/src/components/Package/Package.tsx

@@ -15,7 +15,7 @@ interface PackageProps {
    projectName: string;
    packageName: string;
    versionId?: string;
-   navigate?: (to: string) => void;
+   navigate?: (to: string, event?: React.MouseEvent) => void;
    accessToken?: string;
 }
 
@@ -106,6 +106,7 @@ export default function Package({
                <Notebook
                   notebookPath={README_NOTEBOOK}
                   expandCodeCells={true}
+                  hideEmbeddingIcons={true}
                />
             </Grid>
          </Grid>

package/src/components/Project/Packages.tsx

@@ -9,7 +9,7 @@ const queryClient = new QueryClient();
 interface ProjectProps {
    server?: string;
    projectName: string;
-   navigate?: (to: string) => void;
+   navigate: (to: string, event?: React.MouseEvent) => void;
    accessToken?: string;
 }
 
@@ -34,12 +34,6 @@ export default function Project({
       queryClient,
    );
 
-   if (!navigate) {
-      navigate = (to: string) => {
-         window.location.href = to;
-      };
-   }
-
    return (
       <>
          {!isSuccess && !isError && (
@@ -74,7 +68,9 @@ export default function Project({
                               <StyledCard
                                  variant="outlined"
                                  sx={{ padding: "10px", cursor: "pointer" }}
-                                 onClick={() => navigate(p.name + "/")}
+                                 onClick={(event) =>
+                                    navigate(p.name + "/", event)
+                                 }
                               >
                                  <StyledCardContent>
                                     <Typography

package/src/components/Project/Project.tsx

@@ -5,7 +5,7 @@ import Packages from "./Packages";
 interface ProjectProps {
    server?: string;
    projectName: string;
-   navigate?: (to: string) => void;
+   navigate: (to: string, event?: React.MouseEvent) => void;
    accessToken?: string;
 }
 

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} />;
 }

package/src/components/RenderedResult/ResultContainer.tsx

@@ -0,0 +1,161 @@
+import React, {
+   lazy,
+   Suspense,
+   useState,
+   useRef,
+   useCallback,
+   useEffect,
+} from "react";
+import { Box, IconButton } from "@mui/material";
+import { ExpandMore, ExpandLess } from "@mui/icons-material";
+
+const RenderedResult = lazy(() => import("../RenderedResult/RenderedResult"));
+
+interface ResultContainerProps {
+   result: string | undefined;
+   minHeight: number;
+   maxHeight: number;
+}
+
+export default function ResultContainer({
+   result,
+   minHeight,
+   maxHeight,
+}: 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 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) => {
+      console.log("Content height received:", height);
+      setContentHeight(height);
+   }, []);
+
+   // Determine if toggle should be shown based on content height vs container height
+   useEffect(() => {
+      // 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, minHeight]);
+
+   if (!result) {
+      return null;
+   }
+
+   const height = explicitHeight
+      ? {
+           minHeight: `${explicitHeight}px`,
+           height: `${explicitHeight}px`,
+        }
+      : {};
+   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: isExpanded ? "auto" : "hidden",
+                  p: 1,
+                  // Adjust bottom padding when toggle is shown to prevent content overlap
+                  pb: shouldShowToggle ? "40px" : 1,
+               }}
+            >
+               {(result && (
+                  <Suspense fallback={<div>Loading result...</div>}>
+                     <RenderedResult
+                        result={result}
+                        onSizeChange={handleSizeChange}
+                     />
+                  </Suspense>
+               )) || <div> Loading...</div>}
+            </Box>
+
+            {/* 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.9)",
+                     borderTop: "1px solid #e0e0e0",
+                     display: "flex",
+                     alignItems: "center",
+                     justifyContent: "center",
+                     backdropFilter: "blur(2px)",
+                  }}
+               >
+                  <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: 20 }} />
+                     ) : (
+                        <ExpandMore sx={{ fontSize: 20 }} />
+                     )}
+                  </IconButton>
+               </Box>
+            )}
+         </Box>
+      </>
+   );
+}

package/src/components/click_helper.ts

@@ -0,0 +1,37 @@
+import { useNavigate } from "react-router-dom";
+import { MouseEvent } from "react";
+
+/**
+ * Custom hook that returns a function for handling clicks with proper modifier key support.
+ * The returned function handles CMD/Ctrl clicks to open in new tabs, regular clicks for navigation.
+ *
+ * @returns A function that takes a relative URL and either navigates or opens in new tab
+ */
+export function useRouterClickHandler() {
+   const navigate = useNavigate();
+
+   return (to: string, event?: MouseEvent) => {
+      // If no event or no modifier keys, use normal navigation
+      if (
+         !event ||
+         (!event.metaKey &&
+            !event.ctrlKey &&
+            !event.shiftKey &&
+            event.button !== 1)
+      ) {
+         navigate(to);
+         return;
+      }
+
+      // For modifier keys or middle mouse, let browser handle it by opening URL
+      const href = new URL(to, window.location.href).href;
+
+      if (event.metaKey || event.ctrlKey || event.button === 1) {
+         // CMD/Ctrl click or middle mouse - open in new tab
+         window.open(href, "_blank");
+      } else if (event.shiftKey) {
+         // Shift click - open in new window
+         window.open(href, "_blank");
+      }
+   };
+}

package/src/components/index.ts

@@ -5,3 +5,4 @@ export * from "./Package";
 export * from "./Project";
 export * from "./QueryResult";
 export * from "./Home";
+export { useRouterClickHandler } from "./click_helper";

package/src/components/styles.ts

@@ -9,7 +9,7 @@ export const StyledCard = styled(Card)({
 export const StyledCardContent = styled(CardContent)({
    display: "flex",
    flexDirection: "column",
-   padding: "0px 10px 10px 10px",
+   padding: "0px 4px 4px 4px",
    flexGrow: 1,
    "&:last-child": {
       paddingBottom: 0,
@@ -17,7 +17,7 @@ export const StyledCardContent = styled(CardContent)({
 });
 
 export const StyledCardMedia = styled(CardMedia)({
-   padding: "0px 10px 0px 10px",
+   padding: "0px 4px 0px 4px",
 });
 
 export const StyledExplorerPage = styled("div")({

package/vite.config.ts

@@ -42,7 +42,6 @@ export default ({ mode }) => {
                      "@uiw/react-md-editor",
                      "axios",
                      "markdown-to-jsx",
-                     "react-router-dom",
                   ],
                },
             },

package/dist/RenderedResult-C1_N6KvU.js

@@ -1,12 +0,0 @@
-import { j as t } from "./vendor-C36FjD0v.js";
-import "./index.es.js";
-import { useRef as o, useEffect as n } from "react";
-function l({ result: r }) {
-  const e = o(null);
-  return n(() => {
-    e.current && (e.current.malloyResult = JSON.parse(r));
-  }, [r]), /* @__PURE__ */ t.jsx("malloy-render", { ref: e });
-}
-export {
-  l as default
-};

package/dist/RenderedResult-Df-v_vru.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./vendor-DSpmIox9.cjs");require("./index.cjs.js");const t=require("react");function n({result:r}){const e=t.useRef(null);return t.useEffect(()=>{e.current&&(e.current.malloyResult=JSON.parse(r))},[r]),u.jsxRuntimeExports.jsx("malloy-render",{ref:e})}exports.default=n;