@malloy-publisher/sdk 0.0.1

package/src/components/Model/ModelCell.tsx

@@ -0,0 +1,175 @@
+import React from "react";
+import {
+   styled,
+   Collapse,
+   CardActions,
+   Card,
+   CardContent,
+   Divider,
+   Stack,
+   Typography,
+   Tooltip,
+   IconButton,
+} from "@mui/material";
+import { QueryResult } from "../QueryResult";
+import AnalyticsOutlinedIcon from "@mui/icons-material/AnalyticsOutlined";
+import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { useEffect } from "react";
+import { highlight } from "../highlighter";
+
+const StyledCard = styled(Card)({
+   display: "flex",
+   flexDirection: "column",
+   height: "100%",
+});
+
+interface ModelCellProps {
+   server: string;
+   packageName: string;
+   modelPath: string;
+   sourceName?: string;
+   queryName: string;
+}
+
+export function ModelCell({
+   server,
+   packageName,
+   modelPath,
+   sourceName,
+   queryName,
+}: ModelCellProps) {
+   const [resultsExpanded, setResultsExpanded] = React.useState(false);
+   const [sharingExpanded, setSharingExpanded] = React.useState(false);
+   const [highlightedEmbedCode, setHighlightedEmbedCode] =
+      React.useState<string>();
+   useEffect(() => {
+      highlight(
+         getQueryResultCodeSnippet(
+            server,
+            packageName,
+            modelPath,
+            sourceName,
+            queryName,
+         ),
+         "typescript",
+      ).then((code) => {
+         setHighlightedEmbedCode(code);
+      });
+   }, [server, packageName, modelPath, sourceName, queryName]);
+
+   return (
+      <>
+         <StyledCard
+            variant="outlined"
+            sx={{
+               padding: "0px 10px 0px 10px",
+               borderRadius: "0px",
+            }}
+         >
+            <Stack
+               sx={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  width: "100%",
+               }}
+            >
+               <Typography
+                  variant="subtitle2"
+                  sx={{ mt: "auto", mb: "auto" }}
+               >{`View > ${queryName}`}</Typography>
+               <CardActions sx={{ padding: "0px" }}>
+                  <Tooltip
+                     title={resultsExpanded ? "Hide Results" : "Show Results"}
+                  >
+                     <IconButton
+                        size="small"
+                        onClick={() => {
+                           setResultsExpanded(!resultsExpanded);
+                        }}
+                     >
+                        <AnalyticsOutlinedIcon />
+                     </IconButton>
+                  </Tooltip>
+                  <Tooltip
+                     title={sharingExpanded ? "Hide Sharing" : "Show Sharing"}
+                  >
+                     <IconButton
+                        size="small"
+                        onClick={() => {
+                           setSharingExpanded(!sharingExpanded);
+                        }}
+                     >
+                        <ShareOutlinedIcon />
+                     </IconButton>
+                  </Tooltip>
+               </CardActions>
+            </Stack>
+            <Collapse in={sharingExpanded} timeout="auto" unmountOnExit>
+               <Divider sx={{ mb: "10px" }} />
+               <Stack
+                  sx={{
+                     p: "10px",
+                     borderRadius: 0,
+                     flexDirection: "row",
+                     justifyContent: "space-between",
+                  }}
+               >
+                  <Typography
+                     fontSize="12px"
+                     sx={{ fontSize: "12px", "& .line": { textWrap: "wrap" } }}
+                  >
+                     <div
+                        className="content"
+                        dangerouslySetInnerHTML={{
+                           __html: highlightedEmbedCode,
+                        }}
+                     />
+                  </Typography>
+                  <Tooltip title="View Code">
+                     <IconButton
+                        sx={{ width: "24px", height: "24px" }}
+                        onClick={() => {
+                           navigator.clipboard.writeText(
+                              getQueryResultCodeSnippet(
+                                 server,
+                                 packageName,
+                                 modelPath,
+                                 sourceName,
+                                 queryName,
+                              ),
+                           );
+                        }}
+                     >
+                        <ContentCopyIcon />
+                     </IconButton>
+                  </Tooltip>
+               </Stack>
+            </Collapse>
+            <Collapse in={resultsExpanded} timeout="auto" unmountOnExit>
+               <Divider sx={{ mb: "10px" }} />
+               <CardContent>
+                  <QueryResult
+                     server={server}
+                     packageName={packageName}
+                     modelPath={modelPath}
+                     sourceName={sourceName}
+                     queryName={queryName}
+                  />
+               </CardContent>
+            </Collapse>
+         </StyledCard>
+      </>
+   );
+}
+
+function getQueryResultCodeSnippet(
+   server: string,
+   packageName: string,
+   modelPath: string,
+   sourceName: string,
+   queryName: string,
+): string {
+   return `<QueryResult server="${server}" packageName="${packageName}" modelPath="${modelPath}" sourceName="${sourceName}" queryName="${queryName}"/>`;
+}

package/src/components/Model/index.ts

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

package/src/components/Notebook/Notebook.tsx

@@ -0,0 +1,82 @@
+import { Configuration, ModelsApi } from "../../client";
+import axios from "axios";
+import Stack from "@mui/material/Stack";
+import { NotebookCell } from "./NotebookCell";
+import { Typography } from "@mui/material";
+import { useQuery, QueryClient } from "@tanstack/react-query";
+
+axios.defaults.baseURL = "http://localhost:4000";
+const modelsApi = new ModelsApi(new Configuration());
+const queryClient = new QueryClient();
+
+interface NotebookProps {
+   server?: string;
+   packageName: string;
+   notebookPath: string;
+   versionId?: string;
+}
+
+export default function Notebook({
+   server,
+   packageName,
+   notebookPath,
+   versionId,
+}: NotebookProps) {
+   const {
+      data: notebook,
+      isSuccess,
+      isError,
+      error,
+   } = useQuery(
+      {
+         queryKey: [server, packageName, notebookPath, versionId],
+         queryFn: () =>
+            modelsApi.getModel(packageName, notebookPath, versionId, {
+               baseURL: server,
+               withCredentials: true,
+            }),
+         retry: false,
+      },
+      queryClient,
+   );
+
+   return (
+      <Stack spacing={1} component="section">
+         {!isSuccess && !isError && (
+            <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
+               Fetching Notebook...
+            </Typography>
+         )}
+         {isSuccess &&
+            notebook.data.notebookCells?.map((cell, index) => (
+               <NotebookCell
+                  cell={cell}
+                  modelDef={notebook.data.modelDef}
+                  dataStyles={notebook.data.dataStyles}
+                  queryResultCodeSnippet={getQueryResultCodeSnippet(
+                     server,
+                     packageName,
+                     notebookPath,
+                     cell.text,
+                  )}
+                  key={index}
+               />
+            ))}
+         {isError && (
+            <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
+               {`${packageName} > ${notebookPath} > ${versionId} - ${error.message}`}
+            </Typography>
+         )}
+      </Stack>
+   );
+}
+
+function getQueryResultCodeSnippet(
+   server: string,
+   packageName: string,
+   modelPath: string,
+   query: string,
+): string {
+   const queryResultsString = `<QueryResult server="${server}" packageName="${packageName}" modelPath="${modelPath}" query="${query}"/>`;
+   return queryResultsString.replace(/\n/g, "");
+}

package/src/components/Notebook/NotebookCell.tsx

@@ -0,0 +1,194 @@
+import React from "react";
+import { Suspense, lazy } from "react";
+import {
+   Stack,
+   Collapse,
+   CardActions,
+   CardContent,
+   IconButton,
+   Tooltip,
+} from "@mui/material";
+import { StyledCard, StyledCardContent } from "../styles";
+import Markdown from "markdown-to-jsx";
+import { NotebookCell as ClientNotebookCell } from "../../client";
+import { Typography } from "@mui/material";
+import { Divider } from "@mui/material";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { highlight } from "../highlighter";
+import { useEffect } from "react";
+import CodeIcon from "@mui/icons-material/Code";
+import ShareIcon from "@mui/icons-material/ShareOutlined";
+
+const RenderedResult = lazy(() => import("../RenderedResult/RenderedResult"));
+
+interface NotebookCellProps {
+   cell: ClientNotebookCell;
+   modelDef: string;
+   dataStyles: string;
+   queryResultCodeSnippet: string;
+}
+
+export function NotebookCell({
+   cell,
+   modelDef,
+   dataStyles,
+   queryResultCodeSnippet,
+}: NotebookCellProps) {
+   const [codeExpanded, setCodeExpanded] = React.useState<boolean>(false);
+   const [sharingExpanded, setSharingExpanded] = React.useState<boolean>(false);
+   const [highlightedMalloyCode, setHighlightedMalloyCode] =
+      React.useState<string>();
+   const [highlightedEmbedCode, setHighlightedEmbedCode] =
+      React.useState<string>();
+   useEffect(() => {
+      if (cell.type === "code")
+         highlight(cell.text, "malloy").then((code) => {
+            setHighlightedMalloyCode(code);
+         });
+   }, [cell]);
+
+   useEffect(() => {
+      highlight(queryResultCodeSnippet, "typescript").then((code) => {
+         setHighlightedEmbedCode(code);
+      });
+   }, [queryResultCodeSnippet]);
+
+   return (
+      (cell.type === "markdown" && (
+         <StyledCard variant="outlined" sx={{ border: 0 }}>
+            <StyledCardContent>
+               <Markdown>{cell.text}</Markdown>
+            </StyledCardContent>
+         </StyledCard>
+      )) ||
+      (cell.type === "code" && (
+         <StyledCard variant="outlined">
+            <Stack
+               sx={{ flexDirection: "row", justifyContent: "space-between" }}
+            >
+               <Typography variant="overline" sx={{ ml: "10px" }}>
+                  Code {cell.queryResult && "+ Results"} Cell
+               </Typography>
+               <Stack>
+                  <CardActions
+                     sx={{
+                        padding: "0px 10px 0px 10px",
+                        mb: "auto",
+                        mt: "auto",
+                     }}
+                  >
+                     <Tooltip title={codeExpanded ? "Hide Code" : "View Code"}>
+                        <IconButton
+                           size="small"
+                           onClick={() => {
+                              setCodeExpanded(!codeExpanded);
+                           }}
+                        >
+                           <CodeIcon />
+                        </IconButton>
+                     </Tooltip>
+                     {cell.queryResult && (
+                        <Tooltip
+                           title={
+                              sharingExpanded ? "Hide Sharing" : "View Sharing"
+                           }
+                        >
+                           <IconButton
+                              size="small"
+                              onClick={() => {
+                                 setSharingExpanded(!sharingExpanded);
+                              }}
+                           >
+                              <ShareIcon />
+                           </IconButton>
+                        </Tooltip>
+                     )}
+                  </CardActions>
+               </Stack>
+            </Stack>
+            <Collapse in={codeExpanded} timeout="auto" unmountOnExit>
+               <Divider />
+               <Stack
+                  sx={{
+                     p: "10px",
+                     borderRadius: 0,
+                     flexDirection: "row",
+                     justifyContent: "space-between",
+                  }}
+               >
+                  <Typography
+                     sx={{ fontSize: "12px", "& .line": { textWrap: "wrap" } }}
+                  >
+                     <div
+                        className="content"
+                        dangerouslySetInnerHTML={{
+                           __html: highlightedMalloyCode,
+                        }}
+                     />
+                  </Typography>
+                  <Tooltip title="View Code">
+                     <IconButton
+                        sx={{ width: "24px", height: "24px" }}
+                        onClick={() => {
+                           navigator.clipboard.writeText(cell.text);
+                        }}
+                     >
+                        <ContentCopyIcon />
+                     </IconButton>
+                  </Tooltip>
+               </Stack>
+            </Collapse>
+            <Collapse in={sharingExpanded} timeout="auto" unmountOnExit>
+               <Divider />
+               <Stack
+                  sx={{
+                     p: "10px",
+                     borderRadius: 0,
+                     flexDirection: "row",
+                     justifyContent: "space-between",
+                  }}
+               >
+                  <Typography
+                     sx={{
+                        fontSize: "12px",
+                        "& .line": { textWrap: "wrap" },
+                     }}
+                  >
+                     <div
+                        dangerouslySetInnerHTML={{
+                           __html: highlightedEmbedCode,
+                        }}
+                     />
+                  </Typography>
+                  <Tooltip title="View Code">
+                     <IconButton
+                        sx={{ width: "24px", height: "24px" }}
+                        onClick={() => {
+                           navigator.clipboard.writeText(
+                              queryResultCodeSnippet,
+                           );
+                        }}
+                     >
+                        <ContentCopyIcon />
+                     </IconButton>
+                  </Tooltip>
+               </Stack>
+            </Collapse>
+            {cell.queryResult && (
+               <>
+                  <Divider sx={{ mb: "10px" }} />
+                  <CardContent>
+                     <Suspense fallback="Loading malloy...">
+                        <RenderedResult
+                           modelDef={modelDef}
+                           queryResult={cell.queryResult}
+                           dataStyles={dataStyles}
+                        />
+                     </Suspense>
+                  </CardContent>
+               </>
+            )}
+         </StyledCard>
+      ))
+   );
+}

package/src/components/Notebook/index.ts

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

package/src/components/Package/Config.tsx

@@ -0,0 +1,99 @@
+import ErrorIcon from "@mui/icons-material/ErrorOutlined";
+import {
+   Box,
+   Divider,
+   List,
+   ListItem,
+   ListItemText,
+   Typography,
+} from "@mui/material";
+import { QueryClient, useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { Configuration, PackagesApi } from "../../client";
+import { StyledCard, StyledCardContent } from "../styles";
+
+axios.defaults.baseURL = "http://localhost:4000";
+const packagesApi = new PackagesApi(new Configuration());
+const queryClient = new QueryClient();
+
+interface PackageProps {
+   server?: string;
+   packageName: string;
+   versionId?: string;
+}
+
+export default function Package({
+   server,
+   packageName,
+   versionId,
+}: PackageProps) {
+   const { data, isSuccess, isError, error } = useQuery(
+      {
+         queryKey: ["package", server, packageName, versionId],
+         queryFn: () =>
+            packagesApi.getPackage(packageName, versionId, {
+               baseURL: server,
+               withCredentials: true,
+            }),
+         retry: false,
+      },
+      queryClient,
+   );
+
+   return (
+      <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
+         <StyledCardContent>
+            <Typography variant="overline" fontWeight="bold">
+               Package Config
+            </Typography>
+            <Divider />
+            <Box
+               sx={{
+                  mt: "10px",
+                  maxHeight: "300px",
+                  overflowY: "auto",
+               }}
+            >
+               <List dense={true} disablePadding={true}>
+                  <ListItem dense={true} disablePadding={true}>
+                     <ListItemText primary="Name" secondary={packageName} />
+                  </ListItem>
+                  {!isSuccess && !isError && (
+                     <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
+                        Fethching Package Metadata...
+                     </Typography>
+                  )}
+                  {isSuccess &&
+                     ((data.data && (
+                        <ListItem dense={true} disablePadding={true}>
+                           <ListItemText
+                              primary="Description"
+                              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 && (
+                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
+                        {`${packageName} > ${versionId} - ${error.message}`}
+                     </Typography>
+                  )}
+               </List>
+            </Box>
+         </StyledCardContent>
+      </StyledCard>
+   );
+}

package/src/components/Package/Databases.tsx

@@ -0,0 +1,75 @@
+import { Box, Divider, Typography } from "@mui/material";
+import { QueryClient, useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { Configuration, DatabasesApi } from "../../client";
+import { StyledCard, StyledCardContent } from "../styles";
+import { FileTreeView } from "./FileTreeView";
+
+axios.defaults.baseURL = "http://localhost:4000";
+const databasesApi = new DatabasesApi(new Configuration());
+const queryClient = new QueryClient();
+
+const DEFAULT_EXPANDED_FOLDERS = ["data/"];
+
+interface PackageProps {
+   server?: string;
+   packageName: string;
+   versionId?: string;
+}
+
+export default function Package({
+   server,
+   packageName,
+   versionId,
+}: PackageProps) {
+   const { data, isSuccess, isError, error } = useQuery(
+      {
+         queryKey: ["databases", server, packageName, versionId],
+         queryFn: () =>
+            databasesApi.listDatabases(packageName, versionId, {
+               baseURL: server,
+               withCredentials: true,
+            }),
+         retry: false,
+      },
+      queryClient,
+   );
+
+   return (
+      <StyledCard variant="outlined" sx={{ padding: "10px", width: "100%" }}>
+         <StyledCardContent>
+            <Typography variant="overline" fontWeight="bold">
+               Embedded Databases
+            </Typography>
+            <Divider />
+            <Box
+               sx={{
+                  mt: "10px",
+                  maxHeight: "300px",
+                  overflowY: "auto",
+               }}
+            >
+               {!isSuccess && !isError && (
+                  <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
+                     Fetching Databases...
+                  </Typography>
+               )}
+               {isSuccess && data.data.length > 0 && (
+                  <FileTreeView
+                     items={data.data}
+                     defaultExpandedItems={DEFAULT_EXPANDED_FOLDERS}
+                  />
+               )}
+               {isSuccess && data.data.length === 0 && (
+                  <Typography variant="body2">No Embedded Databases</Typography>
+               )}
+               {isError && (
+                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
+                     {`${packageName} > ${versionId} - ${error.message}`}
+                  </Typography>
+               )}
+            </Box>
+         </StyledCardContent>
+      </StyledCard>
+   );
+}