@malloy-publisher/sdk 0.0.118 → 0.0.120

package/package.json

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

package/src/components/Connections/common.ts

@@ -188,6 +188,7 @@ export const connectionFieldsByType: Record<
          type: "text",
       },
    ],
+   duckdb: [],
 };
 
 export const attributesFieldName: Record<ConnectionTypeEnum, string> = {
@@ -196,4 +197,5 @@ export const attributesFieldName: Record<ConnectionTypeEnum, string> = {
    snowflake: "snowflakeConnection",
    trino: "trinoConnection",
    mysql: "mysqlConnection",
+   duckdb: "duckdbConnection",
 };

package/src/components/Home/DeleteProjectDialog.tsx

@@ -84,6 +84,16 @@ export default function DeleteProjectDialog({
                </Typography>
             </DialogContent>
             <DialogActions>
+               <Button
+                  variant="outlined"
+                  onClick={handleClose}
+                  style={{
+                     borderColor: "#14b3cb",
+                     color: "#14b3cb",
+                  }}
+               >
+                  Cancel
+               </Button>
                <Button
                   loading={deleteProject.isPending}
                   variant="contained"

package/src/components/Home/Home.tsx

@@ -441,7 +441,7 @@ function ProjectCard({
                <Typography
                   variant="body2"
                   color="text.secondary"
-                  sx={{ mb: 2 }}
+                  sx={{ mb: 2, minHeight: "60px" }}
                >
                   {getProjectDescription(project.readme)}
                </Typography>

package/src/components/Model/Model.tsx

@@ -1,4 +1,6 @@
-import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import "@malloydata/malloy-explorer/styles.css";
+import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
+import ZoomOutMapIcon from "@mui/icons-material/ZoomOutMap";
 import {
    Box,
    IconButton,
@@ -7,17 +9,15 @@ import {
    Tooltip,
    Typography,
 } from "@mui/material";
-import SearchIcon from "@mui/icons-material/Search";
-import ShareIcon from "@mui/icons-material/Share";
-import "@malloydata/malloy-explorer/styles.css";
-import { QueryExplorerResult } from "./SourcesExplorer";
+import React, { useState } from "react";
+import { parseResourceUri } from "../../utils/formatting";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
+import { ModelCell } from "./ModelCell";
 import { ModelExplorer } from "./ModelExplorer";
 import { ModelExplorerDialog } from "./ModelExplorerDialog";
-import { ModelCell } from "./ModelCell";
+import { QueryExplorerResult } from "./SourcesExplorer";
 import { useModelData } from "./useModelData";
-import React, { useState } from "react";
-import { parseResourceUri } from "../../utils/formatting";
 
 interface ModelProps {
    onChange?: (query: QueryExplorerResult) => void;
@@ -103,8 +103,8 @@ export default function Model({ onChange, resourceUri }: ModelProps) {
                         >
                            Sources
                         </Typography>
-                        <Tooltip title="Click to copy and share">
-                           <ShareIcon
+                        <Tooltip title="Click to copy link">
+                           <LinkOutlinedIcon
                               sx={{
                                  fontSize: "24px",
                                  color: "#666666",
@@ -140,9 +140,15 @@ export default function Model({ onChange, resourceUri }: ModelProps) {
                         }}
                         onClick={() => setDialogOpen(true)}
                      >
-                        <SearchIcon
-                           sx={{ fontSize: "18px", color: "#666666" }}
-                        />
+                        <Tooltip title="Expanded view">
+                           <ZoomOutMapIcon
+                              sx={{
+                                 fontSize: "18px",
+                                 color: "#666666",
+                                 marginBottom: "5px",
+                              }}
+                           />
+                        </Tooltip>
                      </IconButton>
                   </Stack>
                )}

package/src/components/Model/ModelCell.tsx

@@ -1,13 +1,13 @@
-import { Box, Typography, IconButton } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
+import { Box, IconButton, Typography } from "@mui/material";
 import React, { useEffect } from "react";
 import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
+import { parseResourceUri } from "../../utils/formatting";
 import { highlight } from "../highlighter";
 import ResultContainer from "../RenderedResult/ResultContainer";
 import ResultsDialog from "../ResultsDialog";
-import { CleanMetricCard, CleanNotebookCell } from "../styles";
-import { parseResourceUri } from "../../utils/formatting";
 import { useServer } from "../ServerProvider";
+import { CleanMetricCard, CleanNotebookCell } from "../styles";
 
 interface ModelCellProps {
    sourceName?: string;
@@ -37,14 +37,16 @@ export function ModelCell({
    } = useQueryWithApiError({
       queryKey: ["namedQueryResult", resourceUri, queryName],
       queryFn: () =>
-         apiClients.queryResults.executeQuery(
+         apiClients.models.executeQueryModel(
             projectName,
             packageName,
             modelPath,
-            undefined, // query
-            undefined, // sourceName
-            queryName, // queryName
-            versionId, // versionId
+            {
+               query: undefined,
+               sourceName: undefined,
+               queryName: queryName,
+               versionId: versionId,
+            },
          ),
       enabled: true, // Always execute
    });

package/src/components/Model/ModelExplorer.tsx

@@ -1,5 +1,6 @@
-import { Box, Button, Stack } from "@mui/material";
-import { styled } from "@mui/material/styles";
+import { Box, Stack } from "@mui/material";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
 import React from "react";
 import { CompiledModel } from "../../client";
 import { parseResourceUri } from "../../utils/formatting";
@@ -10,33 +11,33 @@ import { QueryExplorerResult, SourcesExplorer } from "./SourcesExplorer";
 import { useModelData } from "./useModelData";
 
 // Add a styled component for the multi-row tab bar
-const MultiRowTabBar = styled(Box)(({ theme }) => ({
-   display: "flex",
-   flexWrap: "wrap",
-   gap: theme.spacing(1),
-   borderBottom: "1px solid #f0f0f0",
-   minHeight: 48,
-   paddingBottom: "8px",
-}));
+// const MultiRowTabBar = styled(Box)(({ theme }) => ({
+//    display: "flex",
+//    flexWrap: "wrap",
+//    gap: theme.spacing(1),
+//    borderBottom: "1px solid #f0f0f0",
+//    minHeight: 48,
+//    paddingBottom: "8px",
+// }));
 
-const MultiRowTab = styled(Button)<{ selected?: boolean }>(
-   ({ theme, selected }) => ({
-      minHeight: 32,
-      padding: theme.spacing(0.75, 2),
-      borderRadius: "6px",
-      background: selected ? "#f8f9fa" : "transparent",
-      color: selected ? "#495057" : "#666666",
-      fontWeight: selected ? 600 : 500,
-      border: selected ? "1px solid #e9ecef" : "1px solid transparent",
-      boxShadow: "none",
-      textTransform: "none",
-      fontSize: "15px",
-      "&:hover": {
-         background: selected ? "#f8f9fa" : "#fafafa",
-         border: selected ? "1px solid #e9ecef" : "1px solid #f0f0f0",
-      },
-   }),
-);
+// const MultiRowTab = styled(Button)<{ selected?: boolean }>(
+//    ({ theme, selected }) => ({
+//       minHeight: 32,
+//       padding: theme.spacing(0.75, 2),
+//       borderRadius: "6px",
+//       background: selected ? "#f8f9fa" : "transparent",
+//       color: selected ? "#495057" : "#666666",
+//       fontWeight: selected ? 600 : 500,
+//       border: selected ? "1px solid #e9ecef" : "1px solid transparent",
+//       boxShadow: "none",
+//       textTransform: "none",
+//       fontSize: "15px",
+//       "&:hover": {
+//          background: selected ? "#f8f9fa" : "#fafafa",
+//          border: selected ? "1px solid #e9ecef" : "1px solid #f0f0f0",
+//       },
+//    }),
+// );
 
 export interface ModelExplorerProps {
    data?: CompiledModel;
@@ -103,43 +104,77 @@ export function ModelExplorer({
       return <Loading text="Loading..." />;
    }
 
+   const sourceOptions = (effectiveData?.sourceInfos || []).map(
+      (source, idx) => {
+         try {
+            const parsed = JSON.parse(source);
+            return parsed?.name || `Source ${idx + 1}`;
+         } catch {
+            return `Source ${idx + 1}`;
+         }
+      },
+   );
+   const selectedName = sourceOptions[selectedTab] || "";
+
    return (
       <StyledCard variant="outlined">
          <StyledCardContent>
             <Stack
                sx={{
                   flexDirection: "row",
-                  justifyContent: "space-between",
                }}
             >
                {/* Render the tabs for source selection */}
-               {Array.isArray(effectiveData.sourceInfos) &&
-                  effectiveData.sourceInfos.length > 0 && (
-                     <MultiRowTabBar>
-                        {effectiveData.sourceInfos.map((source, idx) => {
-                           let sourceInfo;
-                           try {
-                              sourceInfo = JSON.parse(source);
-                           } catch {
-                              sourceInfo = { name: String(idx) };
-                           }
-                           return (
-                              <MultiRowTab
-                                 key={sourceInfo.name || idx}
-                                 selected={selectedTab === idx}
-                                 onClick={() => {
-                                    setSelectedTab(idx);
-                                    if (onSourceChange) {
-                                       onSourceChange(idx);
-                                    }
-                                 }}
-                              >
-                                 {sourceInfo.name || `Source ${idx + 1}`}
-                              </MultiRowTab>
-                           );
-                        })}
-                     </MultiRowTabBar>
-                  )}
+               {/* {Array.isArray(effectiveData.sourceInfos) &&
+                     effectiveData.sourceInfos.length > 0 && (
+                        <MultiRowTabBar>
+                           {effectiveData.sourceInfos.map((source, idx) => {
+                              let sourceInfo;
+                              try {
+                                 sourceInfo = JSON.parse(source);
+                              } catch {
+                                 sourceInfo = { name: String(idx) };
+                              }
+                              return (
+                                 <MultiRowTab
+                                    key={sourceInfo.name || idx}
+                                    selected={selectedTab === idx}
+                                    onClick={() => {
+                                       setSelectedTab(idx);
+                                       if (onSourceChange) {
+                                          onSourceChange(idx);
+                                       }
+                                    }}
+                                 >
+                                    {sourceInfo.name || `Source ${idx + 1}`}
+                                 </MultiRowTab>
+                              );
+                           })}
+                        </MultiRowTabBar>
+                     )} */}
+               <Autocomplete
+                  size="small"
+                  id="size-small-standard"
+                  disablePortal
+                  options={sourceOptions}
+                  value={selectedName}
+                  onChange={(_e, newValue) => {
+                     if (!newValue) return;
+
+                     const idx = sourceOptions.indexOf(newValue);
+                     if (idx >= 0) {
+                        setSelectedTab(idx);
+                        onSourceChange?.(idx);
+                     }
+                  }}
+                  renderInput={(params) => <TextField {...params} />}
+                  style={{
+                     width: 350,
+                     marginTop: "3px",
+                     marginLeft: "6px",
+                     marginBottom: "8px",
+                  }}
+               />
             </Stack>
          </StyledCardContent>
          <StyledCardMedia>

package/src/components/Model/SourcesExplorer.tsx

@@ -173,15 +173,16 @@ function SourceExplorerComponentInner({
             ...query,
             query: malloy,
          });
-         return apiClients.queryResults.executeQuery(
+         return apiClients.models.executeQueryModel(
             projectName,
             packageName,
             sourceAndPath.modelPath,
-            malloy,
-            undefined,
-            // sourceInfo.name,
-            undefined,
-            versionId,
+            {
+               query: malloy,
+               sourceName: undefined,
+               queryName: undefined,
+               versionId: versionId,
+            },
          );
       },
       onSuccess: (data) => {

package/src/components/Notebook/NotebookCell.tsx

@@ -1,18 +1,18 @@
 import CloseIcon from "@mui/icons-material/Close";
 import CodeIcon from "@mui/icons-material/Code";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
 import SearchIcon from "@mui/icons-material/Search";
-import ShareIcon from "@mui/icons-material/Share";
 import {
    Box,
    Dialog,
    DialogContent,
    DialogTitle,
    IconButton,
+   Snackbar,
    Stack,
    Tooltip,
    Typography,
-   Snackbar,
 } from "@mui/material";
 import Markdown from "markdown-to-jsx";
 import React, { useEffect, useState } from "react";
@@ -176,8 +176,8 @@ export function NotebookCell({
                      justifyContent="space-between"
                   >
                      <Markdown>{cell.text}</Markdown>
-                     <Tooltip title="Click to copy and share">
-                        <ShareIcon
+                     <Tooltip title="Click to copy link">
+                        <LinkOutlinedIcon
                            sx={{
                               fontSize: "24px",
                               color: "#666666",

package/src/components/Package/FileTreeView.tsx

@@ -222,16 +222,16 @@ function getTreeViewRecursive(
          });
       } else {
          // This is a directory.
-         path += `${key}/`;
+         const childPath = path + key + "/";
          treeViewItems.push({
-            id: path,
+            id: childPath,
             label: key,
             fileType: "directory",
             selectable: true,
             link: undefined,
             children: getTreeViewRecursive(
                value as Map<string, unknown>,
-               path,
+               childPath,
                onClickNode,
             ),
          });

package/src/components/Package/Package.tsx

@@ -1,17 +1,16 @@
-import { Grid, Box } from "@mui/material";
+import { Box, Grid } from "@mui/material";
+import { encodeResourceUri, parseResourceUri } from "../../utils/formatting";
 import { Notebook } from "../Notebook";
-import Config from "./Config";
-import Connections from "./Connections";
-import Databases from "./Databases";
-import Models from "./Models";
-import Notebooks from "./Notebooks";
-import Schedules from "./Schedules";
 import {
    PackageCard,
    PackageCardContent,
    PackageSectionTitle,
 } from "../styles";
-import { encodeResourceUri, parseResourceUri } from "../../utils/formatting";
+import Config from "./Config";
+import Connections from "./Connections";
+import Databases from "./Databases";
+import Models from "./Models";
+import Notebooks from "./Notebooks";
 
 const README_NOTEBOOK = "README.malloynb";
 
@@ -59,9 +58,6 @@ export default function Package({
             <Grid size={{ xs: 12, md: 6 }}>
                <Connections resourceUri={resourceUri} />
             </Grid>
-            <Grid size={{ xs: 12, md: 12 }}>
-               <Schedules resourceUri={resourceUri} />
-            </Grid>
             <Grid size={{ xs: 12, md: 12 }}>
                <PackageCard>
                   <PackageCardContent>

package/src/components/Project/About.tsx

@@ -1,38 +1,93 @@
-import { Box } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import Markdown from "markdown-to-jsx";
+import { useState } from "react";
 import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
+import { parseResourceUri } from "../../utils/formatting";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
+import { useServer } from "../ServerProvider";
 import {
    PackageCard,
    PackageCardContent,
    PackageSectionTitle,
 } from "../styles";
-import { parseResourceUri } from "../../utils/formatting";
-import { useServer } from "../ServerProvider";
-
 interface AboutProps {
    resourceUri: string;
 }
 
 export default function About({ resourceUri }: AboutProps) {
-   const { projectName: projectName } = parseResourceUri(resourceUri);
+   const { projectName } = parseResourceUri(resourceUri);
    const { apiClients } = useServer();
+   const [expanded, setExpanded] = useState(false);
+   const wordLimit = 90;
 
    const { data, isSuccess, isError, error } = useQueryWithApiError({
       queryKey: ["about", projectName],
       queryFn: () => apiClients.projects.getProject(projectName, false),
    });
 
+   const readmeContent = data?.data?.readme || "";
+   const words = readmeContent.split(/\s+/);
+   const shouldTruncate = words.length > wordLimit;
+   const preview = words.slice(0, wordLimit).join(" ");
+
    return (
       <>
          {!isSuccess && !isError && <Loading text="Fetching About..." />}
-         {isSuccess && data.data?.readme && (
+         {isSuccess && readmeContent && (
             <PackageCard>
                <PackageCardContent>
                   <PackageSectionTitle>Readme</PackageSectionTitle>
-                  <Box sx={{ mt: 1 }}>
-                     <Markdown>{data.data.readme}</Markdown>
+                  <Box sx={{ mt: 1, fontSize: "0.875rem", lineHeight: 1.6 }}>
+                     <Markdown
+                        options={{
+                           overrides: {
+                              h1: {
+                                 component: "p",
+                                 props: {
+                                    style: {
+                                       fontSize: "inherit",
+                                       fontWeight: "italic",
+                                    },
+                                 },
+                              },
+                              h2: {
+                                 component: "p",
+                                 props: {
+                                    style: {
+                                       fontSize: "inherit",
+                                       fontWeight: "italic",
+                                    },
+                                 },
+                              },
+                              h3: {
+                                 component: "p",
+                                 props: {
+                                    style: {
+                                       fontSize: "inherit",
+                                       fontWeight: "italic",
+                                    },
+                                 },
+                              },
+                           },
+                        }}
+                     >
+                        {expanded || !shouldTruncate ? readmeContent : preview}
+                     </Markdown>
+
+                     {shouldTruncate && (
+                        <Box sx={{ mt: 1 }}>
+                           {" "}
+                           {/* separate line */}
+                           <Button
+                              variant="text"
+                              size="small"
+                              onClick={() => setExpanded(!expanded)}
+                           >
+                              {expanded ? "Read less" : "Read more"}
+                           </Button>
+                        </Box>
+                     )}
                   </Box>
                </PackageCardContent>
             </PackageCard>