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

package/src/components/Package/Config.tsx

@@ -1,97 +0,0 @@
-import ErrorIcon from "@mui/icons-material/ErrorOutlined";
-import { Box, List, ListItem, ListItemText } from "@mui/material";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
-import { ApiErrorDisplay } from "../ApiErrorDisplay";
-import { Loading } from "../Loading";
-import {
-   PackageCard,
-   PackageCardContent,
-   PackageSectionTitle,
-} from "../styles";
-import { parseResourceUri } from "../../utils/formatting";
-import { useServer } from "../ServerProvider";
-
-type Props = {
-   resourceUri: string;
-};
-
-export default function Config({ resourceUri }: Props) {
-   const { apiClients } = useServer();
-   const {
-      environmentName: environmentName,
-      packageName: packageName,
-      versionId: versionId,
-   } = parseResourceUri(resourceUri);
-
-   const { data, isSuccess, isError, error } = useQueryWithApiError({
-      queryKey: ["package", environmentName, packageName, versionId],
-      queryFn: () =>
-         apiClients.packages.getPackage(
-            environmentName,
-            packageName,
-            versionId,
-            false,
-         ),
-   });
-
-   return (
-      <PackageCard>
-         <PackageCardContent>
-            <PackageSectionTitle>Package Config</PackageSectionTitle>
-            <Box
-               sx={{
-                  maxHeight: "200px",
-                  overflowY: "auto",
-               }}
-            >
-               <List dense={true} disablePadding={true}>
-                  <ListItem dense={true} disablePadding={true}>
-                     <ListItemText
-                        primary="Name"
-                        primaryTypographyProps={{ fontWeight: "500" }}
-                        secondary={packageName}
-                     />
-                  </ListItem>
-                  {!isSuccess && !isError && (
-                     <ListItem>
-                        <Loading text="Fetching Package Metadata..." />
-                     </ListItem>
-                  )}
-                  {isSuccess &&
-                     ((data.data && (
-                        <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>
-                     ))}
-                  {isError && (
-                     <ApiErrorDisplay
-                        error={error}
-                        context={`${environmentName} > ${packageName} > ${versionId}`}
-                     />
-                  )}
-               </List>
-            </Box>
-         </PackageCardContent>
-      </PackageCard>
-   );
-}

package/src/components/Package/Databases.tsx

@@ -1,228 +0,0 @@
-import {
-   Box,
-   Dialog,
-   DialogContent,
-   DialogTitle,
-   Table,
-   TableBody,
-   TableCell,
-   TableContainer,
-   TableHead,
-   TableRow,
-   Typography,
-   IconButton,
-} from "@mui/material";
-import SearchIcon from "@mui/icons-material/Search";
-import React from "react";
-import { Database } from "../../client";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
-import { ApiErrorDisplay } from "../ApiErrorDisplay";
-import { Loading } from "../Loading";
-import {
-   PackageCard,
-   PackageCardContent,
-   PackageSectionTitle,
-} from "../styles";
-import { parseResourceUri } from "../../utils/formatting";
-import { useServer } from "../ServerProvider";
-
-type Props = {
-   resourceUri: string;
-};
-
-export default function Databases({ resourceUri }: Props) {
-   const { apiClients } = useServer();
-   const {
-      environmentName: environmentName,
-      packageName: packageName,
-      versionId: versionId,
-   } = parseResourceUri(resourceUri);
-
-   const [open, setOpen] = React.useState(false);
-   const [selectedDatabase, setSelectedDatabase] =
-      React.useState<Database | null>(null);
-
-   const handleOpen = (database: Database) => {
-      setSelectedDatabase(database);
-      setOpen(true);
-   };
-
-   const handleClose = () => {
-      setOpen(false);
-      setSelectedDatabase(null);
-   };
-
-   const { data, isError, error, isSuccess } = useQueryWithApiError({
-      queryKey: ["databases", environmentName, packageName, versionId],
-      queryFn: () =>
-         apiClients.databases.listDatabases(
-            environmentName,
-            packageName,
-            versionId,
-         ),
-   });
-   const formatRowSize = (size: number) => {
-      if (size >= 1024 * 1024 * 1024 * 1024) {
-         return `${(size / (1024 * 1024 * 1024)).toFixed(2)} T`;
-      } else if (size >= 1024 * 1024 * 1024) {
-         return `${(size / (1024 * 1024 * 1024)).toFixed(2)} G`;
-      } else if (size >= 1024 * 1024) {
-         return `${(size / (1024 * 1024)).toFixed(2)} M`;
-      } else {
-         return `${(size / 1024).toFixed(2)} K`;
-      }
-   };
-   return (
-      <>
-         <PackageCard>
-            <PackageCardContent>
-               <PackageSectionTitle>Embedded Databases</PackageSectionTitle>
-               <Box
-                  sx={{
-                     maxHeight: "200px",
-                     overflowY: "auto",
-                  }}
-               >
-                  {!isSuccess && !isError && (
-                     <Loading text="Fetching Databases..." />
-                  )}
-                  {isError && (
-                     <ApiErrorDisplay
-                        error={error}
-                        context={`${environmentName} > ${packageName} > Databases`}
-                     />
-                  )}
-                  {isSuccess && data.data.length > 0 && (
-                     <Table
-                        size="small"
-                        sx={{
-                           borderCollapse: "collapse",
-                           "& .MuiTableCell-root": {
-                              borderBottom: "1px solid #e0e0e0",
-                           },
-                           "& .MuiTableRow-root:last-child .MuiTableCell-root":
-                              {
-                                 borderBottom: "none",
-                              },
-                        }}
-                     >
-                        <TableBody>
-                           <TableRow>
-                              <TableCell>
-                                 <Typography
-                                    variant="body2"
-                                    fontWeight="500"
-                                    color="text.secondary"
-                                 >
-                                    Name
-                                 </Typography>
-                              </TableCell>
-                              <TableCell align="right">
-                                 <Typography
-                                    variant="body2"
-                                    fontWeight="500"
-                                    color="text.secondary"
-                                 >
-                                    Rows
-                                 </Typography>
-                              </TableCell>
-                           </TableRow>
-                           {data.data.map((database) => (
-                              <TableRow
-                                 key={database.path}
-                                 onClick={() => handleOpen(database)}
-                                 sx={{
-                                    cursor: "pointer",
-                                    "&:hover": {
-                                       backgroundColor: "action.hover",
-                                    },
-                                 }}
-                              >
-                                 <TableCell component="th" scope="row">
-                                    <Box
-                                       sx={{
-                                          display: "flex",
-                                          alignItems: "center",
-                                          gap: 1,
-                                       }}
-                                    >
-                                       <Typography variant="body2">
-                                          {database.path}
-                                       </Typography>
-                                       <SearchIcon
-                                          sx={{
-                                             fontSize: "1rem",
-                                             color: "action.active",
-                                             opacity: 0.7,
-                                          }}
-                                       />
-                                    </Box>
-                                 </TableCell>
-                                 <TableCell align="right">
-                                    <Typography variant="body2">
-                                       {formatRowSize(database.info.rowCount)}
-                                    </Typography>
-                                 </TableCell>
-                              </TableRow>
-                           ))}
-                        </TableBody>
-                     </Table>
-                  )}
-                  {isSuccess && data.data.length === 0 && (
-                     <Typography variant="body2" sx={{ m: "auto" }}>
-                        No databases found
-                     </Typography>
-                  )}
-               </Box>
-            </PackageCardContent>
-         </PackageCard>
-
-         <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
-            <DialogTitle>
-               {selectedDatabase?.path}
-               <IconButton
-                  aria-label="close"
-                  onClick={handleClose}
-                  sx={{ position: "absolute", right: 8, top: 8 }}
-               >
-                  <Box
-                     sx={{
-                        width: 24,
-                        height: 24,
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                     }}
-                  >
-                     X
-                  </Box>
-               </IconButton>
-            </DialogTitle>
-            <DialogContent>
-               {selectedDatabase?.info?.columns && (
-                  <TableContainer>
-                     <Table size="small">
-                        <TableHead>
-                           <TableRow>
-                              <TableCell>Column</TableCell>
-                              <TableCell>Type</TableCell>
-                           </TableRow>
-                        </TableHead>
-                        <TableBody>
-                           {selectedDatabase.info.columns.map((column) => (
-                              <TableRow key={column.name}>
-                                 <TableCell component="th" scope="row">
-                                    {column.name}
-                                 </TableCell>
-                                 <TableCell>{column.type}</TableCell>
-                              </TableRow>
-                           ))}
-                        </TableBody>
-                     </Table>
-                  </TableContainer>
-               )}
-            </DialogContent>
-         </Dialog>
-      </>
-   );
-}

package/src/components/Package/FileTreeView.tsx

@@ -1,241 +0,0 @@
-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, Tooltip } from "@mui/material";
-
-interface FiieTreeViewProps {
-   items: Model[] | Database[];
-   defaultExpandedItems: string[];
-   onClickTreeNode?: (to: string, event?: React.MouseEvent) => void;
-}
-
-export function FileTreeView({
-   items,
-   defaultExpandedItems,
-   onClickTreeNode,
-}: FiieTreeViewProps) {
-   return (
-      <RichTreeView
-         items={getTreeView(items, onClickTreeNode)}
-         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: ((event?: React.MouseEvent) => void) | undefined;
-   error?: string;
-};
-
-interface CustomLabelProps {
-   item: ExtendedTreeItemProps;
-}
-
-function CustomTreeItem2Label({ item, ...other }: CustomLabelProps) {
-   const label = (
-      <TreeItem2Label
-         {...other}
-         sx={{
-            display: "flex",
-            alignItems: "center",
-            color: item.error ? "error.main" : "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.error
-                  ? "error.main"
-                  : item.link
-                    ? "primary.main"
-                    : "grey.600"
-            }
-         >
-            {item.label}
-         </Typography>
-      </TreeItem2Label>
-   );
-
-   return item.error ? (
-      <Tooltip title={item.error} placement="right">
-         {label}
-      </Tooltip>
-   ) : (
-      label
-   );
-}
-
-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: (event) => item.link(event),
-               })}
-               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[],
-   onClickTreeNode: (to: string, event?: React.MouseEvent) => 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, "", onClickTreeNode);
-}
-
-function getTreeViewRecursive(
-   node: Map<string, unknown>,
-   path: string,
-   onClickNode: (to: string, event?: React.MouseEvent) => void,
-): TreeViewBaseItem<ExtendedTreeItemProps>[] {
-   const treeViewItems: TreeViewBaseItem<ExtendedTreeItemProps>[] = [];
-   node.forEach((value, key) => {
-      const fileType =
-         (key.endsWith(".malloy") && "model") ||
-         (key.endsWith(".malloynb") && "notebook") ||
-         (key.endsWith(".parquet") && "database") ||
-         "unknown";
-      if (fileType !== "unknown") {
-         // This is a model or database.
-         const entry = value as Model | Database;
-         treeViewItems.push({
-            id: path + key,
-            label: key,
-            fileType: fileType,
-            link:
-               fileType === "model" || fileType === "notebook"
-                  ? (event) => onClickNode(path + key, event)
-                  : undefined,
-            selectable: fileType === "model" || fileType === "notebook",
-            error: "error" in entry ? entry.error : undefined,
-         });
-      } else {
-         // This is a directory.
-         const childPath = path + key + "/";
-         treeViewItems.push({
-            id: childPath,
-            label: key,
-            fileType: "directory",
-            selectable: true,
-            link: undefined,
-            children: getTreeViewRecursive(
-               value as Map<string, unknown>,
-               childPath,
-               onClickNode,
-            ),
-         });
-      }
-   });
-   return treeViewItems;
-}

package/src/components/Package/Models.tsx

@@ -1,68 +0,0 @@
-import { Box, Typography } from "@mui/material";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
-import { ApiErrorDisplay } from "../ApiErrorDisplay";
-import { Loading } from "../Loading";
-import {
-   PackageCard,
-   PackageCardContent,
-   PackageSectionTitle,
-} from "../styles";
-import { FileTreeView } from "./FileTreeView";
-import { parseResourceUri } from "../../utils/formatting";
-import { useServer } from "../ServerProvider";
-
-const DEFAULT_EXPANDED_FOLDERS = ["notebooks/", "models/"];
-
-interface ModelsProps {
-   onClickModelFile: (to: string, event?: React.MouseEvent) => void;
-   resourceUri: string;
-}
-
-export default function Models({ onClickModelFile, resourceUri }: ModelsProps) {
-   const {
-      environmentName: environmentName,
-      packageName: packageName,
-      versionId: versionId,
-   } = parseResourceUri(resourceUri);
-   const { apiClients } = useServer();
-
-   const { data, isError, error, isSuccess } = useQueryWithApiError({
-      queryKey: ["models", environmentName, packageName, versionId],
-      queryFn: () =>
-         apiClients.models.listModels(environmentName, packageName, versionId),
-   });
-
-   return (
-      <PackageCard>
-         <PackageCardContent>
-            <PackageSectionTitle>Semantic Models</PackageSectionTitle>
-            <Box
-               sx={{
-                  maxHeight: "200px",
-                  overflowY: "auto",
-               }}
-            >
-               {!isSuccess && !isError && <Loading text="Fetching Models..." />}
-               {isError && (
-                  <ApiErrorDisplay
-                     error={error}
-                     context={`${environmentName} > ${packageName} > Models`}
-                  />
-               )}
-               {isSuccess && data.data.length > 0 && (
-                  <FileTreeView
-                     items={data.data.sort((a, b) => {
-                        return a.path.localeCompare(b.path);
-                     })}
-                     onClickTreeNode={onClickModelFile}
-                     defaultExpandedItems={DEFAULT_EXPANDED_FOLDERS}
-                  />
-               )}
-               {isSuccess && data.data.length === 0 && (
-                  <Typography variant="body2">No models found</Typography>
-               )}
-            </Box>
-         </PackageCardContent>
-      </PackageCard>
-   );
-}