@malloy-publisher/sdk 0.0.52 → 0.0.54

package/src/components/Package/Config.tsx

@@ -8,11 +8,11 @@ import {
    Typography,
 } from "@mui/material";
 import { Configuration, PackagesApi } from "../../client";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
 import { StyledCard, StyledCardContent } from "../styles";
 import { usePackage } from "./PackageProvider";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 
 const packagesApi = new PackagesApi(new Configuration());
 
@@ -32,7 +32,7 @@ export default function Config() {
    });
 
    return (
-      <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
+      <StyledCard variant="outlined" sx={{ width: "100%" }}>
          <StyledCardContent>
             <Typography variant="overline" fontWeight="bold">
                Package Config
@@ -40,14 +40,17 @@ export default function Config() {
             <Divider />
             <Box
                sx={{
-                  mt: "10px",
                   maxHeight: "200px",
                   overflowY: "auto",
                }}
             >
                <List dense={true} disablePadding={true}>
                   <ListItem dense={true} disablePadding={true}>
-                     <ListItemText primary="Name" secondary={packageName} />
+                     <ListItemText
+                        primary="Name"
+                        primaryTypographyProps={{ fontWeight: "500" }}
+                        secondary={packageName}
+                     />
                   </ListItem>
                   {!isSuccess && !isError && (
                      <ListItem>
@@ -59,24 +62,27 @@ export default function Config() {
                         <ListItem dense={true} disablePadding={true}>
                            <ListItemText
                               primary="Description"
+                              primaryTypographyProps={{
+                                 fontWeight: "500",
+                              }}
                               secondary={data.data.description}
                            />
                         </ListItem>
                      )) || (
-                        <ListItem
-                           disablePadding={true}
-                           dense={true}
-                           sx={{ mt: "20px" }}
-                        >
-                           <ErrorIcon
-                              sx={{
-                                 color: "grey.600",
-                                 mr: "10px",
-                              }}
-                           />
-                           <ListItemText primary={"No package manifest"} />
-                        </ListItem>
-                     ))}
+                           <ListItem
+                              disablePadding={true}
+                              dense={true}
+                              sx={{ mt: "20px" }}
+                           >
+                              <ErrorIcon
+                                 sx={{
+                                    color: "grey.600",
+                                    mr: "10px",
+                                 }}
+                              />
+                              <ListItemText primary={"No package manifest"} />
+                           </ListItem>
+                        ))}
                   {isError && (
                      <ApiErrorDisplay
                         error={error}

package/src/components/Package/Connections.tsx

@@ -9,10 +9,10 @@ import {
 } from "@mui/material";
 import { Configuration, ConnectionsApi } from "../../client";
 import { Connection as ApiConnection } from "../../client/api";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { StyledCard, StyledCardContent } from "../styles";
 import { usePackage } from "./PackageProvider";
-import { ApiErrorDisplay } from "../ApiErrorDisplay";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 
 const connectionsApi = new ConnectionsApi(new Configuration());
 
@@ -39,7 +39,7 @@ export default function Connections() {
    });
 
    return (
-      <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
+      <StyledCard variant="outlined" sx={{ width: "100%" }}>
          <StyledCardContent>
             <Typography variant="overline" fontWeight="bold">
                Database Connections
@@ -47,13 +47,12 @@ export default function Connections() {
             <Divider />
             <Box
                sx={{
-                  mt: "10px",
                   maxHeight: "200px",
                   overflowY: "auto",
                }}
             >
                {!isSuccess && !isError && (
-                  <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
+                  <Typography variant="body2" sx={{ m: "auto" }}>
                      Fetching Connections...
                   </Typography>
                )}

package/src/components/Package/Databases.tsx

@@ -14,11 +14,11 @@ import {
 } from "@mui/material";
 import React from "react";
 import { Configuration, Database, DatabasesApi } from "../../client";
-import { StyledCard, StyledCardContent } from "../styles";
-import { usePackage } from "./PackageProvider";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
+import { StyledCard, StyledCardContent } from "../styles";
+import { usePackage } from "./PackageProvider";
 
 const databasesApi = new DatabasesApi(new Configuration());
 
@@ -62,15 +62,14 @@ export default function Databases() {
    };
    return (
       <>
-         <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
+         <StyledCard variant="outlined" sx={{ width: "100%" }}>
             <StyledCardContent>
                <Typography variant="overline" fontWeight="bold">
-                  Databases
+                  Embedded Databases
                </Typography>
                <Divider />
                <Box
                   sx={{
-                     mt: "10px",
                      maxHeight: "200px",
                      overflowY: "auto",
                   }}
@@ -111,7 +110,7 @@ export default function Databases() {
                      </Table>
                   )}
                   {isSuccess && data.data.length === 0 && (
-                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
+                     <Typography variant="body2" sx={{ m: "auto" }}>
                         No databases found
                      </Typography>
                   )}

package/src/components/Package/Models.tsx

@@ -1,11 +1,11 @@
 import { Box, Divider, Typography } from "@mui/material";
 import { Configuration, ModelsApi } from "../../client";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
 import { StyledCard, StyledCardContent } from "../styles";
 import { FileTreeView } from "./FileTreeView";
 import { usePackage } from "./PackageProvider";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 
 const modelsApi = new ModelsApi(new Configuration());
 
@@ -24,7 +24,7 @@ export default function Models({ navigate }: ModelsProps) {
    });
 
    return (
-      <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
+      <StyledCard variant="outlined" sx={{ width: "100%" }}>
          <StyledCardContent>
             <Typography variant="overline" fontWeight="bold">
                Semantic Models
@@ -32,7 +32,6 @@ export default function Models({ navigate }: ModelsProps) {
             <Divider />
             <Box
                sx={{
-                  mt: "10px",
                   maxHeight: "200px",
                   overflowY: "auto",
                }}

package/src/components/Package/Notebooks.tsx

@@ -1,11 +1,11 @@
 import { Box, Divider, Typography } from "@mui/material";
 import { Configuration, NotebooksApi } from "../../client";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
 import { StyledCard, StyledCardContent } from "../styles";
 import { FileTreeView } from "./FileTreeView";
 import { usePackage } from "./PackageProvider";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 
 const notebooksApi = new NotebooksApi(new Configuration());
 
@@ -30,7 +30,7 @@ export default function Notebooks({ navigate }: NotebooksProps) {
    });
 
    return (
-      <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
+      <StyledCard variant="outlined" sx={{ width: "100%" }}>
          <StyledCardContent>
             <Typography variant="overline" fontWeight="bold">
                Notebooks
@@ -38,7 +38,6 @@ export default function Notebooks({ navigate }: NotebooksProps) {
             <Divider />
             <Box
                sx={{
-                  mt: "10px",
                   maxHeight: "200px",
                   overflowY: "auto",
                }}

package/src/components/Package/Package.tsx

@@ -21,12 +21,7 @@ export default function Package({ navigate }: PackageProps) {
    }
 
    return (
-      <Grid
-         container
-         spacing={2}
-         columns={12}
-         sx={{ mb: (theme) => theme.spacing(2) }}
-      >
+      <Grid container spacing={2} columns={12}>
          <Grid size={{ xs: 12, md: 4 }}>
             <Config />
          </Grid>

package/src/components/Project/About.tsx

@@ -1,11 +1,11 @@
-import { Divider, Typography } from "@mui/material";
-import { Configuration, ProjectsApi } from "../../client";
+import { Typography } from "@mui/material";
 import Markdown from "markdown-to-jsx";
-import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
-import { useProject } from "./Project";
+import { Configuration, ProjectsApi } from "../../client";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
+import { StyledCard } from "../styles";
+import { useProject } from "./Project";
 
 const projectsApi = new ProjectsApi(new Configuration());
 
@@ -21,16 +21,13 @@ export default function About() {
       <>
          {!isSuccess && !isError && <Loading text="Fetching About..." />}
          {isSuccess && (
-            <StyledCard variant="outlined">
-               <StyledCardContent>
-                  <Typography variant="overline" fontWeight="bold">
-                     Readme
-                  </Typography>
-                  <Divider />
-               </StyledCardContent>
-               <StyledCardMedia>
+            <StyledCard variant="outlined" sx={{ p: 2 }}>
+               <Typography variant="overline" fontWeight="bold" sx={{ mb: 1 }}>
+                  Readme
+               </Typography>
+               <StyledCard sx={{ p: 1 }}>
                   <Markdown>{data.data.readme}</Markdown>
-               </StyledCardMedia>
+               </StyledCard>
             </StyledCard>
          )}
          {isError && (

package/src/components/Project/Packages.tsx

@@ -1,10 +1,10 @@
-import { Box, Divider, Grid, Typography } from "@mui/material";
+import { Box, Grid, Typography } from "@mui/material";
 import { Configuration, PackagesApi } from "../../client";
-import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
-import { useProject } from "./Project";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
+import { StyledCard, StyledCardContent } from "../styles";
+import { useProject } from "./Project";
 
 const packagesApi = new PackagesApi(new Configuration());
 
@@ -24,61 +24,54 @@ export default function Packages({ navigate }: PackagesProps) {
       <>
          {!isSuccess && !isError && <Loading text="Fetching Packages..." />}
          {isSuccess && (
-            <StyledCard variant="outlined">
-               <StyledCardContent>
-                  <Typography variant="overline" fontWeight="bold">
-                     Packages
-                  </Typography>
-                  <Divider />
-               </StyledCardContent>
-               <StyledCardMedia>
-                  <Grid
-                     container
-                     spacing={2}
-                     columns={12}
-                     sx={{ mb: (theme) => theme.spacing(2) }}
-                  >
-                     {data.data
-                        .sort((a, b) => {
-                           return a.name.localeCompare(b.name);
-                        })
-                        .map((p) => (
-                           <Grid
-                              size={{ xs: 12, sm: 12, md: 12, lg: 4 }}
-                              key={p.name}
+            <StyledCard variant="outlined" sx={{ p: 2 }}>
+               <Typography variant="overline" fontWeight="bold" sx={{ mb: 1 }}>
+                  Packages
+               </Typography>
+               <Grid container spacing={2} columns={12}>
+                  {data.data
+                     .sort((a, b) => {
+                        return a.name.localeCompare(b.name);
+                     })
+                     .map((p) => (
+                        <Grid
+                           size={{ xs: 12, sm: 12, md: 12, lg: 4 }}
+                           key={p.name}
+                        >
+                           <StyledCard
+                              variant="outlined"
+                              sx={{
+                                 cursor: "pointer",
+                                 transition: "all 0.2s ease-in-out",
+                                 "&:hover": {
+                                    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+                                    transform: "translateY(-2px)",
+                                 },
+                              }}
+                              onClick={(event) => navigate(p.name + "/", event)}
                            >
-                              <StyledCard
-                                 variant="outlined"
-                                 sx={{ padding: "10px", cursor: "pointer" }}
-                                 onClick={(event) =>
-                                    navigate(p.name + "/", event)
-                                 }
-                              >
-                                 <StyledCardContent>
-                                    <Typography
-                                       variant="overline"
-                                       color="primary.main"
-                                    >
-                                       {p.name}
+                              <StyledCardContent>
+                                 <Typography
+                                    variant="overline"
+                                    color="primary.main"
+                                 >
+                                    {p.name}
+                                 </Typography>
+                                 <Box
+                                    sx={{
+                                       maxHeight: "120px",
+                                       overflowY: "auto",
+                                    }}
+                                 >
+                                    <Typography variant="body2">
+                                       {p.description}
                                     </Typography>
-                                    <Divider />
-                                    <Box
-                                       sx={{
-                                          mt: "10px",
-                                          maxHeight: "100px",
-                                          overflowY: "auto",
-                                       }}
-                                    >
-                                       <Typography variant="body2">
-                                          {p.description}
-                                       </Typography>
-                                    </Box>
-                                 </StyledCardContent>
-                              </StyledCard>
-                           </Grid>
-                        ))}
-                  </Grid>
-               </StyledCardMedia>
+                                 </Box>
+                              </StyledCardContent>
+                           </StyledCard>
+                        </Grid>
+                     ))}
+               </Grid>
             </StyledCard>
          )}
          {isError && (

package/src/components/Project/Project.tsx

@@ -1,7 +1,7 @@
 import { Grid } from "@mui/material";
+import { createContext, ReactNode, useContext } from "react";
 import About from "./About";
 import Packages from "./Packages";
-import { createContext, useContext, ReactNode } from "react";
 
 export interface ProjectContextProps {
    projectName: string;
@@ -11,27 +11,28 @@ const ProjectContext = createContext<ProjectContextProps | undefined>(
    undefined,
 );
 
-interface ProjectProviderProps extends ProjectContextProps {
+export function useProject(): ProjectContextProps {
+   const context = useContext(ProjectContext);
+   if (!context) {
+      throw new Error("useProject must be used within a ProjectProvider");
+   }
+   return context;
+}
+
+interface ProjectProviderProps {
    children: ReactNode;
+   projectName: string;
 }
 
-export const ProjectProvider = ({
-   projectName,
+export function ProjectProvider({
    children,
-}: ProjectProviderProps) => {
+   projectName,
+}: ProjectProviderProps) {
    return (
       <ProjectContext.Provider value={{ projectName }}>
          {children}
       </ProjectContext.Provider>
    );
-};
-
-export function useProject() {
-   const context = useContext(ProjectContext);
-   if (!context) {
-      throw new Error("useProject must be used within a ProjectProvider");
-   }
-   return context;
 }
 
 interface ProjectProps {
@@ -40,12 +41,7 @@ interface ProjectProps {
 
 export default function Project({ navigate }: ProjectProps) {
    return (
-      <Grid
-         container
-         spacing={2}
-         columns={12}
-         sx={{ mb: (theme) => theme.spacing(2) }}
-      >
+      <Grid container spacing={2} columns={12}>
          <Grid size={{ xs: 12, md: 12 }}>
             <Packages navigate={navigate} />
          </Grid>

package/src/components/RenderedResult/ResultContainer.tsx

@@ -79,7 +79,7 @@ export default function ResultContainer({
    if (!result) {
       return null;
    }
-   const loading = <Loading text="Loading..." centered={false} size={32} />;
+   const loading = <Loading text="Loading..." centered={true} size={32} />;
    const renderedHeight = isFillElement
       ? isExpanded
          ? maxHeight - 40
@@ -87,9 +87,9 @@ export default function ResultContainer({
       : undefined;
    const height = explicitHeight
       ? {
-           minHeight: `${explicitHeight}px`,
-           height: `100%`,
-        }
+         minHeight: `${explicitHeight}px`,
+         height: `100%`,
+      }
       : { height: `100%` };
    return (
       <>

package/src/components/styles.ts

@@ -1,4 +1,4 @@
-import { styled, Card, CardContent, CardMedia } from "@mui/material";
+import { Card, CardContent, CardMedia, styled } from "@mui/material";
 
 export const StyledCard = styled(Card)({
    display: "flex",
@@ -9,15 +9,12 @@ export const StyledCard = styled(Card)({
 export const StyledCardContent = styled(CardContent)({
    display: "flex",
    flexDirection: "column",
-   padding: "0px 4px 4px 4px",
+   padding: "10px",
    flexGrow: 1,
-   "&:last-child": {
-      paddingBottom: 0,
-   },
 });
 
 export const StyledCardMedia = styled(CardMedia)({
-   padding: "0px 4px 0px 4px",
+   padding: "10px",
 });
 
 export const StyledExplorerPage = styled("div")({
@@ -30,7 +27,7 @@ export const StyledExplorerBanner = styled("div")({
    height: "30px",
    backgroundColor: "rgba(225, 240, 255, 1)",
    display: "flex",
-   padding: "2px 10px",
+   padding: "4px",
    alignItems: "center",
 });