@malloy-publisher/sdk 0.0.1

package/src/components/Package/FileTreeView.tsx

@@ -0,0 +1,224 @@
+import * as React from "react";
+import {
+   TreeItem2Content,
+   TreeItem2Label,
+   TreeItem2Root,
+   TreeItem2IconContainer,
+} from "@mui/x-tree-view/TreeItem2";
+import { RichTreeView } from "@mui/x-tree-view/RichTreeView";
+import { TreeItem2Provider } from "@mui/x-tree-view/TreeItem2Provider";
+import { TreeViewBaseItem } from "@mui/x-tree-view/models";
+import {
+   unstable_useTreeItem2 as useTreeItem2,
+   UseTreeItem2Parameters,
+} from "@mui/x-tree-view/useTreeItem2";
+import { TreeItem2Icon } from "@mui/x-tree-view/TreeItem2Icon";
+import FolderIcon from "@mui/icons-material/FolderOutlined";
+import ArticleIcon from "@mui/icons-material/ArticleOutlined";
+import ErrorIcon from "@mui/icons-material/ErrorOutlined";
+import { TransitionProps } from "@mui/material/transitions";
+import { animated, useSpring } from "@react-spring/web";
+import Collapse from "@mui/material/Collapse";
+import DnsIcon from "@mui/icons-material/DnsOutlined";
+import DataArrayIcon from "@mui/icons-material/DataArrayOutlined";
+import { Database, Model } from "../../client";
+import { Typography } from "@mui/material";
+
+interface FiieTreeViewProps {
+   items: Model[] | Database[];
+   defaultExpandedItems: string[];
+   navigate?: (to: string) => void;
+}
+
+export function FileTreeView({
+   items,
+   defaultExpandedItems,
+   navigate,
+}: FiieTreeViewProps) {
+   return (
+      <RichTreeView
+         items={getTreeView(items, navigate)}
+         defaultExpandedItems={defaultExpandedItems}
+         slots={{ item: CustomTreeItem }}
+      />
+   );
+}
+
+const AnimatedCollapse = animated(Collapse);
+
+function TransitionComponent(props: TransitionProps) {
+   const style = useSpring({
+      to: {
+         opacity: props.in ? 1 : 0,
+         transform: `translate3d(0,${props.in ? 0 : 20}px,0)`,
+      },
+   });
+
+   return <AnimatedCollapse style={style} {...props} />;
+}
+
+type FileType = "directory" | "model" | "notebook" | "database" | "unknown";
+
+type ExtendedTreeItemProps = {
+   id: string;
+   label: string;
+   fileType: FileType;
+   selectable: boolean;
+   link: () => void | undefined;
+};
+
+interface CustomLabelProps {
+   item: ExtendedTreeItemProps;
+}
+
+function CustomTreeItem2Label({ item, ...other }: CustomLabelProps) {
+   return (
+      <TreeItem2Label
+         {...other}
+         sx={{
+            display: "flex",
+            alignItems: "center",
+            color: "grey.600",
+         }}
+      >
+         {(item.fileType === "directory" && <FolderIcon />) ||
+            (item.fileType === "notebook" && <ArticleIcon />) ||
+            (item.fileType === "model" && <DataArrayIcon />) ||
+            (item.fileType == "database" && <DnsIcon />) || <ErrorIcon />}
+         <Typography
+            variant="body2"
+            sx={{ marginLeft: "5px" }}
+            color={item.link ? "primary.main" : "grey.600"}
+         >
+            {item.label}
+         </Typography>
+      </TreeItem2Label>
+   );
+}
+
+interface CustomTreeItemProps
+   extends Omit<UseTreeItem2Parameters, "rootRef">,
+      Omit<React.HTMLAttributes<HTMLLIElement>, "onFocus"> {}
+
+const CustomTreeItem = React.forwardRef(function CustomTreeItem(
+   props: CustomTreeItemProps,
+   ref: React.Ref<HTMLLIElement>,
+) {
+   const { id, itemId, label, children, disabled, ...other } = props;
+   const {
+      getRootProps,
+      getContentProps,
+      getLabelProps,
+      getIconContainerProps,
+      getGroupTransitionProps,
+      status,
+      publicAPI,
+   } = useTreeItem2({
+      id,
+      itemId,
+      children,
+      label,
+      disabled,
+      rootRef: ref,
+   });
+
+   const item = publicAPI.getItem(itemId);
+
+   // Disable select and focus. We want to either click through to a model or notebook or just exapnd
+   // collapse
+   status.selected = false;
+   status.focused = false;
+
+   return (
+      <TreeItem2Provider itemId={itemId}>
+         <TreeItem2Root {...getRootProps(other)}>
+            <TreeItem2Content
+               {...getContentProps()}
+               {...(item.link && {
+                  onClick: () => item.link(),
+               })}
+               sx={{
+                  // If the item is not selectable, disable pointer events.
+                  pointerEvents: !item.selectable && "none",
+               }}
+            >
+               <TreeItem2IconContainer {...getIconContainerProps()}>
+                  <TreeItem2Icon status={status} />
+               </TreeItem2IconContainer>
+               <CustomTreeItem2Label
+                  {...getLabelProps({
+                     item,
+                  })}
+               />
+            </TreeItem2Content>
+            {children && <TransitionComponent {...getGroupTransitionProps()} />}
+         </TreeItem2Root>
+      </TreeItem2Provider>
+   );
+});
+
+function getTreeView(
+   metadataEntries: Model[] | Database[],
+   navigate: (to: string) => void,
+): TreeViewBaseItem<ExtendedTreeItemProps>[] {
+   const tree = new Map<string, unknown>();
+   metadataEntries.map((entry: Model | Database) => {
+      let node = tree;
+      const pathParts = entry.path.split("/");
+      pathParts.forEach((part, index) => {
+         if (index === pathParts.length - 1) {
+            node.set(part, entry);
+         } else if (!node.has(part)) {
+            node.set(part, new Map<string, unknown>());
+            node = node.get(part) as Map<string, unknown>;
+         } else {
+            node = node.get(part) as Map<string, unknown>;
+         }
+      });
+   });
+   return getTreeViewRecursive(tree, "", navigate);
+}
+
+function getTreeViewRecursive(
+   node: Map<string, unknown>,
+   path: string,
+   navigate: (to: string) => void,
+): TreeViewBaseItem<ExtendedTreeItemProps>[] {
+   const treeViewItems: TreeViewBaseItem<ExtendedTreeItemProps>[] = [];
+   node.forEach((value, key) => {
+      if ((value as Model | Database).type !== undefined) {
+         const fileType =
+            (key.endsWith(".malloy") && "model") ||
+            (key.endsWith(".malloynb") && "notebook") ||
+            (key.endsWith(".parquet") && "database") ||
+            "unknown";
+         // This is a model or database.
+         treeViewItems.push({
+            id: path + key,
+            label: key,
+            fileType: fileType,
+            link:
+               fileType === "model" || fileType === "notebook"
+                  ? navigate.bind(null, path + key)
+                  : undefined,
+            selectable: fileType === "model" || fileType === "notebook",
+         });
+      } else {
+         // This is a directory.
+         path += `${key}/`;
+         treeViewItems.push({
+            id: path,
+            label: key,
+            fileType: "directory",
+            selectable: true,
+            link: undefined,
+            children: getTreeViewRecursive(
+               value as Map<string, unknown>,
+               path,
+               navigate,
+            ),
+         });
+      }
+   });
+   return treeViewItems;
+}

package/src/components/Package/Models.tsx

@@ -0,0 +1,77 @@
+import { Box, Divider, Typography } from "@mui/material";
+import { QueryClient, useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { Configuration, ModelsApi } from "../../client";
+import { StyledCard, StyledCardContent } from "../styles";
+import { FileTreeView } from "./FileTreeView";
+
+axios.defaults.baseURL = "http://localhost:4000";
+const modelsApi = new ModelsApi(new Configuration());
+const queryClient = new QueryClient();
+
+const DEFAULT_EXPANDED_FOLDERS = ["notebooks/", "models/"];
+
+interface ModelsProps {
+   server?: string;
+   packageName: string;
+   versionId?: string;
+   navigate: (to: string) => void;
+}
+
+export default function Models({
+   server,
+   packageName,
+   versionId,
+   navigate,
+}: ModelsProps) {
+   const { data, isSuccess, isError, error } = useQuery(
+      {
+         queryKey: ["models", server, packageName, versionId],
+         queryFn: () =>
+            modelsApi.listModels(packageName, versionId, {
+               baseURL: server,
+               withCredentials: true,
+            }),
+         retry: false,
+      },
+      queryClient,
+   );
+
+   return (
+      <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
+         <StyledCardContent>
+            <Typography variant="overline" fontWeight="bold">
+               Models
+            </Typography>
+            <Divider />
+            <Box
+               sx={{
+                  mt: "10px",
+                  maxHeight: "300px",
+                  overflowY: "auto",
+               }}
+            >
+               {!isSuccess && !isError && (
+                  <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
+                     Fetching Models
+                  </Typography>
+               )}
+               {isSuccess && data.data.length > 0 && (
+                  <FileTreeView
+                     items={data.data.sort((a, b) => {
+                        return a.path.localeCompare(b.path);
+                     })}
+                     defaultExpandedItems={DEFAULT_EXPANDED_FOLDERS}
+                     navigate={navigate}
+                  />
+               )}
+               {isError && (
+                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
+                     {`${packageName} > ${versionId} - ${error.message}`}
+                  </Typography>
+               )}
+            </Box>
+         </StyledCardContent>
+      </StyledCard>
+   );
+}

package/src/components/Package/Package.tsx

@@ -0,0 +1,78 @@
+import { Divider, Grid2, Typography } from "@mui/material";
+import { Notebook } from "../Notebook";
+import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
+import Config from "./Config";
+import Models from "./Models";
+import Databases from "./Databases";
+
+const README_NOTEBOOK = "README.malloynb";
+
+interface PackageProps {
+   server?: string;
+   packageName: string;
+   versionId?: string;
+   navigate?: (to: string) => void;
+}
+
+export default function Package({
+   server,
+   packageName,
+   versionId,
+   navigate,
+}: PackageProps) {
+   if (!navigate) {
+      navigate = (to: string) => {
+         window.location.href = to;
+      };
+   }
+
+   return (
+      <Grid2
+         container
+         spacing={2}
+         columns={12}
+         sx={{ mb: (theme) => theme.spacing(2) }}
+      >
+         <Grid2 size={{ md: 12, lg: 4 }}>
+            <Config
+               server={server}
+               packageName={packageName}
+               versionId={versionId}
+            />
+         </Grid2>
+         <Grid2 size={{ md: 12, lg: 4 }}>
+            <Models
+               server={server}
+               packageName={packageName}
+               versionId={versionId}
+               navigate={navigate}
+            />
+         </Grid2>
+         <Grid2 size={{ md: 12, lg: 4 }}>
+            <Databases
+               server={server}
+               packageName={packageName}
+               versionId={versionId}
+            />
+         </Grid2>
+         <Grid2 size={{ md: 12 }}>
+            <StyledCard variant="outlined">
+               <StyledCardContent>
+                  <Typography variant="overline" fontWeight="bold">
+                     Readme
+                  </Typography>
+                  <Divider />
+               </StyledCardContent>
+               <StyledCardMedia>
+                  <Notebook
+                     server={server}
+                     packageName={packageName}
+                     notebookPath={README_NOTEBOOK}
+                     versionId={versionId}
+                  />
+               </StyledCardMedia>
+            </StyledCard>
+         </Grid2>
+      </Grid2>
+   );
+}

package/src/components/Package/index.ts

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

package/src/components/Project/About.tsx

@@ -0,0 +1,56 @@
+import { Divider, Typography } from "@mui/material";
+import { Configuration, DefaultApi } from "../../client";
+import axios from "axios";
+import Markdown from "markdown-to-jsx";
+import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
+import { QueryClient, useQuery } from "@tanstack/react-query";
+
+axios.defaults.baseURL = "http://localhost:4000";
+const aboutApi = new DefaultApi(new Configuration());
+const queryClient = new QueryClient();
+
+interface AboutProps {
+   server?: string;
+}
+
+export default function About({ server }: AboutProps) {
+   const { data, isSuccess, isError, error } = useQuery(
+      {
+         queryKey: ["about", server],
+         queryFn: () =>
+            aboutApi.about({
+               baseURL: server,
+               withCredentials: true,
+            }),
+      },
+      queryClient,
+   );
+
+   return (
+      <>
+         {!isSuccess && !isError && (
+            <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
+               Fetching About...
+            </Typography>
+         )}
+         {isSuccess && (
+            <StyledCard variant="outlined">
+               <StyledCardContent>
+                  <Typography variant="overline" fontWeight="bold">
+                     Readme
+                  </Typography>
+                  <Divider />
+               </StyledCardContent>
+               <StyledCardMedia>
+                  <Markdown>{data.data.readme}</Markdown>
+               </StyledCardMedia>
+            </StyledCard>
+         )}
+         {isError && (
+            <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
+               {error.message}
+            </Typography>
+         )}
+      </>
+   );
+}

package/src/components/Project/Packages.tsx

@@ -0,0 +1,105 @@
+import { Box, Divider, Grid2, Typography } from "@mui/material";
+import { Configuration, PackagesApi } from "../../client";
+import axios from "axios";
+import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
+import { QueryClient, useQuery } from "@tanstack/react-query";
+
+axios.defaults.baseURL = "http://localhost:4000";
+const packagesApi = new PackagesApi(new Configuration());
+const queryClient = new QueryClient();
+
+interface ProjectProps {
+   server?: string;
+   navigate?: (to: string) => void;
+}
+
+export default function Project({ server, navigate }: ProjectProps) {
+   const { data, isSuccess, isError, error } = useQuery(
+      {
+         queryKey: ["packages", server],
+         queryFn: () =>
+            packagesApi.listPackages({
+               baseURL: server,
+               withCredentials: true,
+            }),
+      },
+      queryClient,
+   );
+
+   if (!navigate) {
+      navigate = (to: string) => {
+         window.location.href = to;
+      };
+   }
+
+   return (
+      <>
+         {!isSuccess && !isError && (
+            <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
+               Fetching Packages...
+            </Typography>
+         )}
+         {isSuccess && (
+            <StyledCard variant="outlined">
+               <StyledCardContent>
+                  <Typography variant="overline" fontWeight="bold">
+                     Packages
+                  </Typography>
+                  <Divider />
+               </StyledCardContent>
+               <StyledCardMedia>
+                  <Grid2
+                     container
+                     spacing={2}
+                     columns={12}
+                     sx={{ mb: (theme) => theme.spacing(2) }}
+                  >
+                     {data.data
+                        .sort((a, b) => {
+                           return a.name.localeCompare(b.name);
+                        })
+                        .map((p) => (
+                           <Grid2
+                              size={{ xs: 12, sm: 12, md: 12, lg: 4 }}
+                              key={p.name}
+                           >
+                              <StyledCard
+                                 variant="outlined"
+                                 sx={{ padding: "10px", cursor: "pointer" }}
+                                 onClick={() => navigate(p.name + "/")}
+                              >
+                                 <StyledCardContent>
+                                    <Typography
+                                       variant="overline"
+                                       color="primary.main"
+                                    >
+                                       {p.name}
+                                    </Typography>
+                                    <Divider />
+                                    <Box
+                                       sx={{
+                                          mt: "10px",
+                                          maxHeight: "100px",
+                                          overflowY: "auto",
+                                       }}
+                                    >
+                                       <Typography variant="body2">
+                                          {p.description}
+                                       </Typography>
+                                    </Box>
+                                 </StyledCardContent>
+                              </StyledCard>
+                           </Grid2>
+                        ))}
+                  </Grid2>
+               </StyledCardMedia>
+            </StyledCard>
+         )}
+         {isError && (
+            <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
+               {error.message}
+            </Typography>
+         )}
+      </>
+   );
+}

package/src/components/Project/Project.tsx

@@ -0,0 +1,26 @@
+import { Grid2 } from "@mui/material";
+import About from "./About";
+import Packages from "./Packages";
+
+interface ProjectProps {
+   server?: string;
+   navigate?: (to: string) => void;
+}
+
+export default function Project({ server, navigate }: ProjectProps) {
+   return (
+      <Grid2
+         container
+         spacing={2}
+         columns={12}
+         sx={{ mb: (theme) => theme.spacing(2) }}
+      >
+         <Grid2 size={{ xs: 12, md: 12 }}>
+            <Packages server={server} navigate={navigate} />
+         </Grid2>
+         <Grid2 size={{ xs: 12, md: 12 }}>
+            <About server={server} />
+         </Grid2>
+      </Grid2>
+   );
+}

package/src/components/Project/index.ts

@@ -0,0 +1 @@
+export { default as Project } from "./Project";

package/src/components/QueryResult/QueryResult.tsx

@@ -0,0 +1,84 @@
+import { Suspense, lazy } from "react";
+import { Configuration, QueryresultsApi } from "../../client";
+import axios from "axios";
+import { Typography } from "@mui/material";
+import { QueryClient, useQuery } from "@tanstack/react-query";
+
+const RenderedResult = lazy(() => import("../RenderedResult/RenderedResult"));
+
+axios.defaults.baseURL = "http://localhost:4000";
+const queryResultsApi = new QueryresultsApi(new Configuration());
+const queryClient = new QueryClient();
+
+interface QueryResultProps {
+   server?: string;
+   packageName: string;
+   modelPath: string;
+   versionId?: string;
+   query?: string;
+   sourceName?: string;
+   queryName?: string;
+}
+
+export default function QueryResult({
+   server,
+   packageName,
+   modelPath,
+   versionId,
+   query,
+   sourceName,
+   queryName,
+}: QueryResultProps) {
+   const { data, isSuccess, isError, error } = useQuery(
+      {
+         queryKey: [
+            "queryResult",
+            server,
+            packageName,
+            modelPath,
+            versionId,
+            query,
+            sourceName,
+            queryName,
+         ],
+         queryFn: () =>
+            queryResultsApi.executeQuery(
+               packageName,
+               modelPath,
+               versionId,
+               query,
+               sourceName,
+               queryName,
+               {
+                  baseURL: server,
+                  withCredentials: true,
+               },
+            ),
+      },
+      queryClient,
+   );
+
+   return (
+      <>
+         {!isSuccess && !isError && (
+            <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
+               Fetching Query Results...
+            </Typography>
+         )}
+         {isSuccess && (
+            <Suspense fallback="Loading malloy...">
+               <RenderedResult
+                  queryResult={data.data.queryResult}
+                  modelDef={data.data.modelDef}
+                  dataStyles={data.data.dataStyles}
+               />
+            </Suspense>
+         )}
+         {isError && (
+            <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
+               {`${packageName} > ${modelPath} > ${versionId} - ${error.message}`}
+            </Typography>
+         )}
+      </>
+   );
+}

package/src/components/QueryResult/index.ts

@@ -0,0 +1 @@
+export { default as QueryResult } from "./QueryResult";