@malloy-publisher/sdk 0.0.198-dev → 0.0.198-dev2

package/src/components/Package/Package.tsx

@@ -1,18 +1,35 @@
-import { Box, Grid } from "@mui/material";
-import React from "react";
-import { encodeResourceUri, parseResourceUri } from "../../utils/formatting";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import CloseIcon from "@mui/icons-material/Close";
+import {
+   Box,
+   Container,
+   Dialog,
+   DialogContent,
+   DialogTitle,
+   IconButton,
+   Link,
+   Stack,
+   Table,
+   TableBody,
+   TableCell,
+   TableHead,
+   TableRow,
+   Typography,
+} from "@mui/material";
+import React, { useState } from "react";
+import { Database } from "../../client";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { RetrievalFunction } from "../filter/DimensionFilter";
+import { Loading } from "../Loading";
 import { Notebook } from "../Notebook";
-import {
-   PackageCard,
-   PackageCardContent,
-   PackageSectionTitle,
-} from "../styles";
-import Config from "./Config";
+import { useServer } from "../ServerProvider";
+import { encodeResourceUri, parseResourceUri } from "../../utils/formatting";
+import { MALLOY_BRAND, MONO_FONT_FAMILY } from "../styles";
+import ContentTypeIcon from "./ContentTypeIcon";
+// TODO(redesign-followup): port the Connections section into the redesigned
+// flat-row aesthetic (currently rendered with its original card/table styling).
 import Connections from "./Connections";
-import Databases from "./Databases";
-import Models from "./Models";
-import Notebooks from "./Notebooks";
 
 const README_NOTEBOOK = "README.malloynb";
 
@@ -28,55 +45,370 @@ export default function Package({
    resourceUri,
    retrievalFn,
 }: PackageProps) {
-   if (!onClickPackageFile) {
-      onClickPackageFile = (to: string) => {
+   const { apiClients } = useServer();
+   const onClick =
+      onClickPackageFile ??
+      ((to: string) => {
          window.location.href = to;
-      };
-   }
+      });
+   const { environmentName, packageName, versionId } =
+      parseResourceUri(resourceUri);
+
+   const [schemaDatabase, setSchemaDatabase] = useState<Database | null>(null);
+
+   const pkgQuery = useQueryWithApiError({
+      queryKey: ["package", environmentName, packageName, versionId],
+      queryFn: () =>
+         apiClients.packages.getPackage(
+            environmentName,
+            packageName,
+            versionId,
+            false,
+         ),
+   });
+
+   const notebooksQuery = useQueryWithApiError({
+      queryKey: ["notebooks", environmentName, packageName, versionId],
+      queryFn: () =>
+         apiClients.notebooks.listNotebooks(
+            environmentName,
+            packageName,
+            versionId,
+         ),
+   });
 
+   const modelsQuery = useQueryWithApiError({
+      queryKey: ["models", environmentName, packageName, versionId],
+      queryFn: () =>
+         apiClients.models.listModels(environmentName, packageName, versionId),
+   });
+
+   const databasesQuery = useQueryWithApiError({
+      queryKey: ["databases", environmentName, packageName, versionId],
+      queryFn: () =>
+         apiClients.databases.listDatabases(
+            environmentName,
+            packageName,
+            versionId,
+         ),
+   });
+
+   const notebooks = (notebooksQuery.data?.data ?? [])
+      .slice()
+      .sort((a, b) => a.path.localeCompare(b.path));
+   const models = (modelsQuery.data?.data ?? [])
+      .slice()
+      .sort((a, b) => a.path.localeCompare(b.path));
+   const databases = (databasesQuery.data?.data ?? [])
+      .slice()
+      .sort((a, b) => a.path.localeCompare(b.path));
+
+   const description = pkgQuery.data?.data?.description ?? "";
+   const hasReadme = notebooks.some((n) => n.path === README_NOTEBOOK);
    const readmeResourceUri = encodeResourceUri({
-      ...parseResourceUri(resourceUri),
+      environmentName,
+      packageName,
+      versionId,
       modelPath: README_NOTEBOOK,
    });
 
+   const isLoading = !notebooksQuery.isSuccess && !notebooksQuery.isError;
+
+   if (pkgQuery.isError) {
+      return (
+         <ApiErrorDisplay
+            error={pkgQuery.error}
+            context={`${environmentName} > ${packageName}`}
+         />
+      );
+   }
+
    return (
-      <>
-         <Grid container spacing={3} columns={12}>
-            <Grid size={{ xs: 12, md: 4 }}>
-               <Config resourceUri={resourceUri} />
-            </Grid>
-            <Grid size={{ xs: 12, md: 4 }}>
-               <Notebooks
-                  onClickNotebookFile={onClickPackageFile}
-                  resourceUri={resourceUri}
-               />
-            </Grid>
-            <Grid size={{ xs: 12, md: 4 }}>
-               <Models
-                  onClickModelFile={onClickPackageFile}
-                  resourceUri={resourceUri}
-               />
-            </Grid>
-            <Grid size={{ xs: 12, md: 6 }}>
-               <Databases resourceUri={resourceUri} />
-            </Grid>
-            <Grid size={{ xs: 12, md: 6 }}>
-               <Connections resourceUri={resourceUri} />
-            </Grid>
-            <Grid size={{ xs: 12, md: 12 }}>
-               <PackageCard>
-                  <PackageCardContent>
-                     <PackageSectionTitle>README</PackageSectionTitle>
-                     <Box sx={{ mt: 1 }}>
-                        <Notebook
-                           resourceUri={readmeResourceUri}
-                           retrievalFn={retrievalFn}
-                        />
-                     </Box>
-                  </PackageCardContent>
-               </PackageCard>
-            </Grid>
-         </Grid>
-      </>
+      <Container
+         maxWidth={false}
+         sx={{ maxWidth: 1024, mx: "auto", px: 3, py: 6 }}
+      >
+         <Box sx={{ mb: 4 }}>
+            <Link
+               onClick={(event: React.MouseEvent) =>
+                  onClick(`/${environmentName}/`, event)
+               }
+               underline="none"
+               sx={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 0.5,
+                  cursor: "pointer",
+                  color: "text.secondary",
+                  fontSize: "0.875rem",
+                  mb: 2,
+                  "&:hover": { color: "primary.main" },
+               }}
+            >
+               <ArrowBackIcon sx={{ fontSize: 18 }} />
+               Back to {environmentName}
+            </Link>
+            <Typography
+               variant="h4"
+               component="h1"
+               sx={{
+                  fontWeight: 600,
+                  letterSpacing: "-0.025em",
+                  mb: 0.5,
+               }}
+            >
+               {packageName}
+            </Typography>
+            {description && (
+               <Typography variant="body2" color="text.secondary">
+                  {description}
+               </Typography>
+            )}
+         </Box>
+
+         {isLoading && <Loading text="Loading package..." />}
+
+         {!isLoading && (
+            <>
+               <PackageSection
+                  title="Governed Reports"
+                  count={notebooks.length}
+               >
+                  {notebooks.map((notebook) => (
+                     <PackageItemRow
+                        key={notebook.path}
+                        icon={<ContentTypeIcon type="report" />}
+                        tint={MALLOY_BRAND.teal}
+                        label={notebook.path}
+                        onClick={(event) => onClick(notebook.path, event)}
+                     />
+                  ))}
+                  {notebooks.length === 0 && <EmptyRow label="No notebooks" />}
+               </PackageSection>
+
+               <PackageSection title="Semantic Models" count={models.length}>
+                  {models.map((model) => (
+                     <PackageItemRow
+                        key={model.path}
+                        icon={<ContentTypeIcon type="model" />}
+                        tint={MALLOY_BRAND.orange}
+                        label={model.path}
+                        onClick={(event) => onClick(model.path, event)}
+                     />
+                  ))}
+                  {models.length === 0 && <EmptyRow label="No models" />}
+               </PackageSection>
+
+               <PackageSection title="Package Data" count={databases.length}>
+                  {databases.map((database) => (
+                     <PackageItemRow
+                        key={database.path}
+                        icon={<ContentTypeIcon type="data" />}
+                        tint={MALLOY_BRAND.darkBlue}
+                        label={database.path}
+                        rightLabel={formatRowCount(database.info.rowCount)}
+                        onClick={() => setSchemaDatabase(database)}
+                     />
+                  ))}
+                  {databases.length === 0 && <EmptyRow label="No data files" />}
+               </PackageSection>
+
+               <Box sx={{ mb: 4 }}>
+                  <Connections resourceUri={resourceUri} />
+               </Box>
+
+               {hasReadme && (
+                  <Box sx={{ mt: 6 }}>
+                     <Notebook
+                        resourceUri={readmeResourceUri}
+                        retrievalFn={retrievalFn}
+                     />
+                  </Box>
+               )}
+            </>
+         )}
+
+         <Dialog
+            open={schemaDatabase !== null}
+            onClose={() => setSchemaDatabase(null)}
+            maxWidth="sm"
+            fullWidth
+         >
+            <DialogTitle sx={{ pr: 6 }}>
+               {schemaDatabase?.path}
+               <IconButton
+                  aria-label="close"
+                  onClick={() => setSchemaDatabase(null)}
+                  sx={{ position: "absolute", right: 8, top: 8 }}
+               >
+                  <CloseIcon fontSize="small" />
+               </IconButton>
+            </DialogTitle>
+            <DialogContent>
+               {schemaDatabase?.info?.columns && (
+                  <Table size="small">
+                     <TableHead>
+                        <TableRow>
+                           <TableCell>Column</TableCell>
+                           <TableCell>Type</TableCell>
+                        </TableRow>
+                     </TableHead>
+                     <TableBody>
+                        {schemaDatabase.info.columns.map((column) => (
+                           <TableRow key={column.name}>
+                              <TableCell component="th" scope="row">
+                                 {column.name}
+                              </TableCell>
+                              <TableCell>{column.type}</TableCell>
+                           </TableRow>
+                        ))}
+                     </TableBody>
+                  </Table>
+               )}
+            </DialogContent>
+         </Dialog>
+      </Container>
    );
 }
+
+function PackageSection({
+   title,
+   count,
+   children,
+}: {
+   title: string;
+   count: number;
+   children: React.ReactNode;
+}) {
+   return (
+      <Box sx={{ mb: 4 }}>
+         <Stack
+            direction="row"
+            alignItems="baseline"
+            spacing={1}
+            sx={{ mb: 1 }}
+         >
+            <Typography
+               variant="h6"
+               sx={{ fontWeight: 600, letterSpacing: "-0.025em" }}
+            >
+               {title}
+            </Typography>
+            <Typography variant="caption" color="text.secondary">
+               ({count})
+            </Typography>
+         </Stack>
+         <Box>{children}</Box>
+      </Box>
+   );
+}
+
+function PackageItemRow({
+   icon,
+   tint,
+   label,
+   rightLabel,
+   onClick,
+}: {
+   icon: React.ReactNode;
+   tint: string;
+   label: string;
+   rightLabel?: string;
+   onClick?: (event: React.MouseEvent) => void;
+}) {
+   const interactive = !!onClick;
+   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (!onClick) return;
+      if (event.key === "Enter" || event.key === " ") {
+         event.preventDefault();
+         onClick(event as unknown as React.MouseEvent);
+      }
+   };
+   return (
+      <Box
+         onClick={onClick}
+         onKeyDown={interactive ? handleKeyDown : undefined}
+         role={interactive ? "button" : undefined}
+         tabIndex={interactive ? 0 : undefined}
+         sx={{
+            display: "flex",
+            alignItems: "center",
+            gap: 1.5,
+            py: 1,
+            px: 1,
+            mx: -1,
+            cursor: interactive ? "pointer" : "default",
+            borderRadius: 1.5,
+            transition: "background-color 0.1s",
+            "&:hover": interactive
+               ? { backgroundColor: "grey.100" }
+               : undefined,
+            "&:focus-visible": interactive
+               ? {
+                    outline: "2px solid",
+                    outlineColor: "primary.main",
+                    outlineOffset: 2,
+                 }
+               : undefined,
+         }}
+      >
+         <Box
+            sx={{
+               width: 32,
+               height: 32,
+               borderRadius: 1,
+               bgcolor: tint,
+               color: "#FFFFFF",
+               display: "flex",
+               alignItems: "center",
+               justifyContent: "center",
+               flexShrink: 0,
+            }}
+         >
+            {icon}
+         </Box>
+         <Typography
+            variant="body2"
+            sx={{
+               fontFamily: MONO_FONT_FAMILY,
+               flex: 1,
+               minWidth: 0,
+               overflow: "hidden",
+               textOverflow: "ellipsis",
+               whiteSpace: "nowrap",
+            }}
+         >
+            {label}
+         </Typography>
+         {rightLabel && (
+            <Typography
+               variant="caption"
+               color="text.secondary"
+               sx={{ flexShrink: 0 }}
+            >
+               {rightLabel}
+            </Typography>
+         )}
+      </Box>
+   );
+}
+
+function EmptyRow({ label }: { label: string }) {
+   return (
+      <Typography
+         variant="body2"
+         color="text.secondary"
+         sx={{ py: 1, fontStyle: "italic" }}
+      >
+         {label}
+      </Typography>
+   );
+}
+
+function formatRowCount(rows: number): string {
+   if (rows >= 1_000_000_000)
+      return `${(rows / 1_000_000_000).toFixed(1)} B rows`;
+   if (rows >= 1_000_000) return `${(rows / 1_000_000).toFixed(1)} M rows`;
+   if (rows >= 1_000) return `${(rows / 1_000).toFixed(1)} K rows`;
+   return `${rows} rows`;
+}

package/src/components/Package/index.ts

@@ -1,2 +1 @@
 export { default as Package } from "./Package";
-export { default as Models } from "./Models";

package/src/components/QueryResult/QueryResult.tsx

@@ -72,7 +72,7 @@ export default function QueryResult({
 
    if (!environmentName || !packageName) {
       throw new Error(
-         "No project or package name provided. A resource URI must be provided.",
+         "No environment or package name provided. A resource URI must be provided.",
       );
    }
 

package/src/components/RenderedResult/RenderedResult.tsx

@@ -1,3 +1,4 @@
+import { Box } from "@mui/material";
 import React, { Suspense, useLayoutEffect, useRef } from "react";
 
 type MalloyRenderElement = HTMLElement & Record<string, unknown>;
@@ -156,36 +157,36 @@ export default function RenderedResult(props: RenderedResultProps) {
    // Show loading state if we're in server-side rendering
    if (typeof window === "undefined") {
       return (
-         <div
-            style={{
+         <Box
+            sx={{
                width: "100%",
                height: props.height ? `${props.height}px` : "100%",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
-               color: "#666",
+               color: "text.secondary",
             }}
          >
             Loading...
-         </div>
+         </Box>
       );
    }
 
    return (
       <Suspense
          fallback={
-            <div
-               style={{
+            <Box
+               sx={{
                   width: "100%",
                   height: props.height ? `${props.height}px` : "100%",
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
-                  color: "#666",
+                  color: "text.secondary",
                }}
             >
                Loading visualization...
-            </div>
+            </Box>
          }
       >
          <RenderedResultInner {...props} />

package/src/components/ResultsDialog.tsx

@@ -37,7 +37,7 @@ export default function ResultsDialog({
             }}
          >
             {title}
-            <IconButton onClick={onClose} sx={{ color: "#666666" }}>
+            <IconButton onClick={onClose} sx={{ color: "text.secondary" }}>
                <CloseIcon />
             </IconButton>
          </DialogTitle>

package/src/components/styles.ts

@@ -1,5 +1,24 @@
 import { Card, CardContent, CardMedia, styled } from "@mui/material";
 
+/**
+ * Malloy brand colors — exact hex values from
+ * `publisher/packages/app/public/logo.svg`. Use these instead of hardcoding
+ * the hex values inline so the brand can be retuned in one place.
+ */
+export const MALLOY_BRAND = {
+   teal: "#14b3cb", // light wing of the M (governed reports)
+   orange: "#e47404", // right wing of the M (semantic models)
+   darkBlue: "#1474a4", // deep shadow of the M (package data)
+} as const;
+
+/**
+ * Monospace font stack used by code-like surfaces inside the SDK
+ * (file-path labels in PackageItemRow, code blocks, etc.). Matches the
+ * `MONO_FONT_FAMILY` defined in the publisher app's theme.
+ */
+export const MONO_FONT_FAMILY =
+   '"JetBrains Mono", "ui-monospace", "SFMono-Regular", "Menlo", monospace';
+
 export const StyledCard = styled(Card)({
    display: "flex",
    flexDirection: "column",
@@ -54,17 +73,13 @@ export const CleanNotebookCell = styled("div")({
 });
 
 export const CleanMetricCard = styled("div")({
-   backgroundColor: "#ffffff",
+   backgroundColor: "transparent",
    paddingTop: "12px",
    paddingBottom: "2px",
    borderRadius: "8px",
-   border: "1px solid #f0f0f0",
-   boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
+   border: "none",
+   boxShadow: "none",
    marginBottom: "0",
-   transition: "box-shadow 0.2s ease-in-out",
-   "&:hover": {
-      boxShadow: "0 2px 6px rgba(0, 0, 0, 0.08)",
-   },
 });
 
 export const CleanCodeBlock = styled("div")({
@@ -134,16 +149,14 @@ export const PackageCardContent = styled(CardContent)({
    },
 });
 
-export const PackageSectionTitle = styled("div")({
-   fontSize: "12px",
-   fontWeight: "600",
-   color: "#666666",
-   textTransform: "uppercase",
-   letterSpacing: "0.5px",
+export const PackageSectionTitle = styled("div")(({ theme }) => ({
+   fontSize: "0.875rem",
+   fontWeight: 500,
+   color: theme.palette.text.secondary,
    marginBottom: "16px",
    paddingBottom: "8px",
-   borderBottom: "1px solid #f0f0f0",
-});
+   borderBottom: `1px solid ${theme.palette.divider}`,
+}));
 
 export const PackageContainer = styled("div")({
    padding: "32px",

package/dist/components/Package/Config.d.ts

@@ -1,5 +0,0 @@
-type Props = {
-    resourceUri: string;
-};
-export default function Config({ resourceUri }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Package/Databases.d.ts

@@ -1,5 +0,0 @@
-type Props = {
-    resourceUri: string;
-};
-export default function Databases({ resourceUri }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Package/FileTreeView.d.ts

@@ -1,9 +0,0 @@
-import { Database, Model } from '../../client';
-import * as React from "react";
-interface FiieTreeViewProps {
-    items: Model[] | Database[];
-    defaultExpandedItems: string[];
-    onClickTreeNode?: (to: string, event?: React.MouseEvent) => void;
-}
-export declare function FileTreeView({ items, defaultExpandedItems, onClickTreeNode, }: FiieTreeViewProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Package/Models.d.ts

@@ -1,6 +0,0 @@
-interface ModelsProps {
-    onClickModelFile: (to: string, event?: React.MouseEvent) => void;
-    resourceUri: string;
-}
-export default function Models({ onClickModelFile, resourceUri }: ModelsProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Package/Notebooks.d.ts

@@ -1,6 +0,0 @@
-interface NotebooksProps {
-    onClickNotebookFile: (to: string, event?: React.MouseEvent) => void;
-    resourceUri: string;
-}
-export default function Notebooks({ onClickNotebookFile, resourceUri, }: NotebooksProps): import("react/jsx-runtime").JSX.Element;
-export {};