@malloy-publisher/sdk 0.0.33 → 0.0.35

package/src/components/Model/ModelCell.tsx

@@ -17,6 +17,7 @@ import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import { useEffect } from "react";
 import { highlight } from "../highlighter";
+import { usePackage } from "../Package/PackageProvider";
 
 const StyledCard = styled(Card)({
    display: "flex",
@@ -25,75 +26,60 @@ const StyledCard = styled(Card)({
 });
 
 interface ModelCellProps {
-   server: string;
-   projectName: string;
-   packageName: string;
    modelPath: string;
-   versionId: string;
    sourceName?: string;
    queryName: string;
    expandResult?: boolean;
    hideResultIcon?: boolean;
    expandEmbedding?: boolean;
    hideEmbeddingIcon?: boolean;
-   accessToken?: string;
    noView?: boolean;
    annotations?: string[];
 }
 
 export function ModelCell({
-   server,
-   projectName,
-   packageName,
    modelPath,
-   versionId,
    sourceName,
    queryName,
    expandResult,
    hideResultIcon,
    expandEmbedding,
    hideEmbeddingIcon,
-   accessToken,
    noView,
    annotations,
 }: ModelCellProps) {
    const [resultsExpanded, setResultsExpanded] = React.useState(expandResult);
    const [embeddingExpanded, setEmbeddingExpanded] =
-      React.useState(expandEmbedding);
+      React.useState<boolean>(expandEmbedding);
    const [highlightedEmbedCode, setHighlightedEmbedCode] =
       React.useState<string>();
    const [highlightedAnnotations, setHighlightedAnnotations] =
       React.useState<string>();
 
-   useEffect(() => {
-      highlight(
-         getQueryResultCodeSnippet(
-            server,
-            projectName,
-            packageName,
-            modelPath,
-            versionId,
-            sourceName,
-            queryName,
-         ),
-         "typescript",
-      ).then((code) => {
-         setHighlightedEmbedCode(code);
-      });
-   }, [
+   const { server, projectName, packageName, versionId } = usePackage();
+
+   const queryResultCodeSnippet = getQueryResultCodeSnippet(
       server,
       projectName,
       packageName,
-      modelPath,
       versionId,
       sourceName,
       queryName,
-   ]);
+   );
+
+   useEffect(() => {
+      highlight(queryResultCodeSnippet, "typescript").then((code) => {
+         setHighlightedEmbedCode(code);
+      });
+   }, [embeddingExpanded, queryResultCodeSnippet]);
 
    useEffect(() => {
-      if (annotations) {
-         highlight(getAnnotations(annotations), "malloy").then((code) => {
-            setHighlightedAnnotations(code);
+      if (annotations && annotations.length > 0) {
+         const code = annotations
+            .map((annotation) => `// ${annotation}`)
+            .join("\n");
+         highlight(code, "typescript").then((highlightedCode) => {
+            setHighlightedAnnotations(highlightedCode);
          });
       }
    }, [annotations]);
@@ -155,39 +141,33 @@ export function ModelCell({
                </CardActions>
             </Stack>
             <Collapse in={embeddingExpanded} timeout="auto" unmountOnExit>
-               <Divider sx={{ mb: "10px" }} />
+               <Divider />
                <Stack
                   sx={{
+                     p: "10px",
                      borderRadius: 0,
                      flexDirection: "row",
                      justifyContent: "space-between",
                   }}
                >
                   <Typography
-                     fontSize="12px"
-                     sx={{ fontSize: "12px", "& .line": { textWrap: "wrap" } }}
+                     sx={{
+                        fontSize: "12px",
+                        "& .line": { textWrap: "wrap" },
+                     }}
                   >
                      <div
-                        className="content"
                         dangerouslySetInnerHTML={{
                            __html: highlightedEmbedCode,
                         }}
                      />
                   </Typography>
-                  <Tooltip title="View Code">
+                  <Tooltip title="Copy Embeddable Code">
                      <IconButton
                         sx={{ width: "24px", height: "24px" }}
                         onClick={() => {
                            navigator.clipboard.writeText(
-                              getQueryResultCodeSnippet(
-                                 server,
-                                 projectName,
-                                 packageName,
-                                 modelPath,
-                                 versionId,
-                                 sourceName,
-                                 queryName,
-                              ),
+                              queryResultCodeSnippet,
                            );
                         }}
                      >
@@ -227,14 +207,9 @@ export function ModelCell({
                )}
                <CardContent>
                   <QueryResult
-                     server={server}
-                     projectName={projectName}
-                     packageName={packageName}
                      modelPath={modelPath}
-                     versionId={versionId}
                      sourceName={sourceName}
                      queryName={queryName}
-                     accessToken={accessToken}
                   />
                </CardContent>
             </Collapse>
@@ -247,7 +222,6 @@ function getQueryResultCodeSnippet(
    server: string,
    projectName: string,
    packageName: string,
-   modelPath: string,
    versionId: string,
    sourceName: string,
    queryName: string,
@@ -257,19 +231,8 @@ server="${server}"
 accessToken={accessToken}
 projectName="${projectName}"
 packageName="${packageName}"
-modelPath="${modelPath}"
 versionId="${versionId}"
 sourceName="${sourceName}"
 queryName="${queryName}"
 />`;
 }
-
-function getAnnotations(annotations: string[]): string {
-   let res = "";
-
-   for (const an of annotations) {
-      res += an;
-   }
-
-   return res;
-}

package/src/components/Model/NamedQueries.tsx

@@ -10,7 +10,7 @@ import { StyledCard, StyledCardContent } from "../styles";
 
 import { QueryClient, useMutation } from "@tanstack/react-query";
 import { Configuration } from "../../client";
-import { usePublisherPackage } from "../Package";
+import { usePackage } from "../Package";
 import React from "react";
 import ResultContainer from "../RenderedResult/ResultContainer";
 
@@ -27,7 +27,7 @@ export default function NamedQueries({
    modelPath,
 }: NamedQueryProps) {
    const { server, projectName, packageName, versionId, accessToken } =
-      usePublisherPackage();
+      usePackage();
    const [namedQueryResults, setNamedQueryResults] = React.useState<
       Record<string, string>
    >({});

package/src/components/Model/SourcesExplorer.tsx

@@ -21,7 +21,7 @@ import { styled } from "@mui/material/styles";
 import { QueryClient, useMutation } from "@tanstack/react-query";
 import React from "react";
 import { Configuration, QueryresultsApi } from "../../client";
-import { usePublisherPackage } from "../Package/PublisherPackageProvider";
+import { usePackage } from "../Package/PackageProvider";
 
 const queryResultsApi = new QueryresultsApi(new Configuration());
 const queryClient = new QueryClient();
@@ -87,8 +87,8 @@ export function SourcesExplorer({
    const [selectedTab, setSelectedTab] = React.useState(
       existingSourceName
          ? sourceAndPaths.findIndex(
-            (entry) => entry.sourceInfo.name === existingSourceName,
-         )
+              (entry) => entry.sourceInfo.name === existingSourceName,
+           )
          : 0,
    );
 
@@ -193,7 +193,7 @@ export function SourceExplorerComponent({
       }
    }, [onChange, query]);
    const { server, projectName, packageName, versionId, accessToken } =
-      usePublisherPackage();
+      usePackage();
    const mutation = useMutation(
       {
          mutationFn: () => {
@@ -272,7 +272,6 @@ export function SourceExplorerComponent({
                onFocusedNestViewPathChange={setFocusedNestViewPath}
                onDrill={(params) => {
                   console.info(params);
-                  window.alert("Drill!");
                }}
             >
                <div
@@ -324,16 +323,16 @@ export function SourceExplorerComponent({
                         submittedQuery={
                            query?.malloyQuery
                               ? {
-                                 executionState: mutation.isPending
-                                    ? "running"
-                                    : "finished",
-                                 response: {
-                                    result: query.malloyResult,
-                                 },
-                                 query: query.malloyQuery,
-                                 queryResolutionStartMillis: Date.now(),
-                                 onCancel: mutation.reset,
-                              }
+                                   executionState: mutation.isPending
+                                      ? "running"
+                                      : "finished",
+                                   response: {
+                                      result: query.malloyResult,
+                                   },
+                                   query: query.malloyQuery,
+                                   queryResolutionStartMillis: Date.now(),
+                                   onCancel: mutation.reset,
+                                }
                               : undefined
                         }
                         options={{ showRawQuery: true }}

package/src/components/MutableNotebook/ModelPicker.tsx

@@ -18,8 +18,9 @@ import {
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import React from "react";
 import { Configuration, ModelsApi } from "../../client";
-import { usePublisherPackage } from "../Package/PublisherPackageProvider";
+import { usePackage } from "../Package/PackageProvider";
 import { StyledCard } from "../styles";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 const modelsApi = new ModelsApi(new Configuration());
 const queryClient = new QueryClient();
@@ -38,7 +39,7 @@ export function ModelPicker({
    onModelChange,
 }: ModelPickerProps) {
    const { server, projectName, packageName, versionId, accessToken } =
-      usePublisherPackage();
+      usePackage();
    const { data, isLoading, isSuccess, isError, error } = useQuery(
       {
          queryKey: ["models", server, projectName, packageName, versionId],
@@ -51,6 +52,7 @@ export function ModelPicker({
                },
             }),
          retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
@@ -83,6 +85,15 @@ export function ModelPicker({
          .map((model) => model.path);
    }
 
+   if (isError) {
+      return (
+         <ApiErrorDisplay
+            error={error}
+            context={`${projectName} > ${packageName} > Model Picker`}
+         />
+      );
+   }
+
    return (
       <StyledCard
          sx={{ maxWidth: 400, marginLeft: "10px", padding: "10px 5px 5px 5px" }}
@@ -90,7 +101,6 @@ export function ModelPicker({
          <Typography variant="h6">Imported Models</Typography>
          <FormControl fullWidth>
             {isLoading && <Typography>Loading...</Typography>}
-            {isError && <Typography>Error: {error.message}</Typography>}
             <Stack
                direction="row"
                spacing={1}

package/src/components/MutableNotebook/MutableCell.tsx

@@ -26,7 +26,7 @@ import MDEditor from "@uiw/react-md-editor";
 import { EditableMalloyCell } from "./EditableMalloyCell";
 import { NotebookCellValue } from "../NotebookManager";
 import { SourceAndPath } from "../Model/SourcesExplorer";
-const RenderedResult = lazy(() => import("../RenderedResult/RenderedResult"));
+import ResultContainer from "../RenderedResult/ResultContainer";
 
 interface NotebookCellProps {
    cell: NotebookCellValue;
@@ -293,15 +293,11 @@ export function MutableCell({
                         />
                      ))}
                   {!editingMalloy && cell.result && (
-                     <>
-                        <CardContent
-                           sx={{ maxHeight: "400px", overflow: "auto" }}
-                        >
-                           <Suspense fallback="Loading malloy...">
-                              <RenderedResult result={cell.result} />
-                           </Suspense>
-                        </CardContent>
-                     </>
+                     <ResultContainer
+                        result={cell.result}
+                        minHeight={300}
+                        maxHeight={800}
+                     />
                   )}
                </>
             ))}

package/src/components/MutableNotebook/MutableNotebook.tsx

@@ -20,7 +20,7 @@ import { useRouterClickHandler } from "../click_helper";
 import { Configuration, ModelsApi } from "../../client";
 import { SourceAndPath } from "../Model/SourcesExplorer";
 import { NotebookManager } from "../NotebookManager";
-import { usePublisherPackage } from "../Package";
+import { usePackage } from "../Package";
 import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { ModelPicker } from "./ModelPicker";
 import { MutableCell } from "./MutableCell";
@@ -48,7 +48,7 @@ export default function MutableNotebook({
 }: MutableNotebookProps) {
    const navigate = useRouterClickHandler();
    const { server, projectName, packageName, versionId, accessToken } =
-      usePublisherPackage();
+      usePackage();
    if (!projectName || !packageName) {
       throw new Error(
          "Project and package must be provided via PubliserPackageProvider",

package/src/components/Notebook/Notebook.tsx

@@ -11,11 +11,13 @@ import {
 import Stack from "@mui/material/Stack";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import React, { useEffect } from "react";
-import { Configuration, NotebooksApi } from "../../client";
+import { Configuration, NotebooksApi, CompiledNotebook } from "../../client";
 import { highlight } from "../highlighter";
-import { usePublisherPackage } from "../Package";
+import { usePackage } from "../Package";
 import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { NotebookCell } from "./NotebookCell";
+import { ApiErrorDisplay, ApiError } from "../ApiErrorDisplay";
+import { AxiosError } from "axios";
 
 const notebooksApi = new NotebooksApi(new Configuration());
 const queryClient = new QueryClient();
@@ -27,7 +29,7 @@ interface NotebookProps {
    expandEmbeddings?: boolean;
    hideEmbeddingIcons?: boolean;
 }
-// Requires PublisherPackageProvider
+// Requires PackageProvider
 export default function Notebook({
    notebookPath,
    expandCodeCells,
@@ -40,7 +42,7 @@ export default function Notebook({
    const [highlightedEmbedCode, setHighlightedEmbedCode] =
       React.useState<string>();
    const { server, projectName, packageName, accessToken, versionId } =
-      usePublisherPackage();
+      usePackage();
    const notebookCodeSnippet = getNotebookCodeSnippet(
       server,
       packageName,
@@ -59,7 +61,7 @@ export default function Notebook({
       isSuccess,
       isError,
       error,
-   } = useQuery(
+   } = useQuery<CompiledNotebook, ApiError>(
       {
          queryKey: [
             "notebook",
@@ -69,21 +71,44 @@ export default function Notebook({
             notebookPath,
             versionId,
          ],
-         queryFn: () =>
-            notebooksApi.getNotebook(
-               projectName,
-               packageName,
-               notebookPath,
-               versionId,
-               {
-                  baseURL: server,
-                  withCredentials: !accessToken,
-                  headers: {
-                     Authorization: accessToken && `Bearer ${accessToken}`,
+         queryFn: async () => {
+            try {
+               const response = await notebooksApi.getNotebook(
+                  projectName,
+                  packageName,
+                  notebookPath,
+                  versionId,
+                  {
+                     baseURL: server,
+                     withCredentials: !accessToken,
+                     headers: {
+                        Authorization: accessToken && `Bearer ${accessToken}`,
+                     },
                   },
-               },
-            ),
+               );
+               return response.data;
+            } catch (err) {
+               // If it's an Axios error, it will have response data
+               if (err && typeof err === "object" && "response" in err) {
+                  const axiosError = err as AxiosError<{
+                     code: string;
+                     message: string;
+                  }>;
+                  if (axiosError.response?.data) {
+                     const apiError: ApiError = new Error(
+                        axiosError.response.data.message || axiosError.message,
+                     );
+                     apiError.status = axiosError.response.status;
+                     apiError.data = axiosError.response.data;
+                     throw apiError;
+                  }
+               }
+               // For other errors, throw as is
+               throw err;
+            }
+         },
          retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
@@ -171,7 +196,7 @@ export default function Notebook({
                   </Typography>
                )}
                {isSuccess &&
-                  notebook.data.notebookCells?.map((cell, index) => (
+                  notebook.notebookCells?.map((cell, index) => (
                      <NotebookCell
                         cell={cell}
                         notebookPath={notebookPath}
@@ -190,11 +215,10 @@ export default function Notebook({
                      />
                   ))}
                {isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     {(error.message.includes("404") &&
-                        `${notebookPath} does not exist`) ||
-                        `${projectName} > ${packageName} > ${notebookPath} > ${versionId} - ${error.message}`}
-                  </Typography>
+                  <ApiErrorDisplay
+                     error={error}
+                     context={`${projectName} > ${packageName} > ${notebookPath}`}
+                  />
                )}
             </Stack>
          </StyledCardMedia>

package/src/components/Notebook/NotebookCell.tsx

@@ -225,11 +225,13 @@ export function NotebookCell({
                />
             </Collapse>
             {cell.result && !sourcesExpanded && (
-               <ResultContainer
-                  result={cell.result}
-                  minHeight={200}
-                  maxHeight={800}
-               />
+               <>
+                  <ResultContainer
+                     result={cell.result}
+                     minHeight={300}
+                     maxHeight={700}
+                  />
+               </>
             )}
          </StyledCard>
       ))

package/src/components/Package/Config.tsx

@@ -11,26 +11,16 @@ import { QueryClient, useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { Configuration, PackagesApi } from "../../client";
 import { StyledCard, StyledCardContent } from "../styles";
+import { usePackage } from "./PackageProvider";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
-axios.defaults.baseURL = "http://localhost:4000";
 const packagesApi = new PackagesApi(new Configuration());
 const queryClient = new QueryClient();
 
-interface PackageProps {
-   server?: string;
-   projectName: string;
-   packageName: string;
-   versionId?: string;
-   accessToken?: string;
-}
+export default function Config() {
+   const { server, projectName, packageName, versionId, accessToken } =
+      usePackage();
 
-export default function Package({
-   server,
-   projectName,
-   packageName,
-   versionId,
-   accessToken,
-}: PackageProps) {
    const { data, isSuccess, isError, error } = useQuery(
       {
          queryKey: ["package", server, projectName, packageName, versionId],
@@ -43,6 +33,7 @@ export default function Package({
                },
             }),
          retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
@@ -94,9 +85,10 @@ export default function Package({
                         </ListItem>
                      ))}
                   {isError && (
-                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                        {`${projectName} > ${packageName} > ${versionId} - ${error.message}`}
-                     </Typography>
+                     <ApiErrorDisplay
+                        error={error}
+                        context={`${projectName} > ${packageName} > ${versionId}`}
+                     />
                   )}
                </List>
             </Box>

package/src/components/Package/Connections.tsx

@@ -11,17 +11,12 @@ import { QueryClient, useQuery } from "@tanstack/react-query";
 import { Configuration, ConnectionsApi } from "../../client";
 import { Connection as ApiConnection } from "../../client/api";
 import { StyledCard, StyledCardContent } from "../styles";
+import { usePackage } from "./PackageProvider";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 const connectionsApi = new ConnectionsApi(new Configuration());
 const queryClient = new QueryClient();
 
-interface ConnectionsProps {
-   server?: string;
-   projectName: string;
-   accessToken: string;
-   navigate: (to: string, event?: React.MouseEvent) => void;
-}
-
 // TODO(jjs) - Move this UI to the ConnectionExplorer component
 function Connection({ connection }: { connection: ApiConnection }) {
    return (
@@ -36,8 +31,9 @@ function Connection({ connection }: { connection: ApiConnection }) {
    );
 }
 
-export default function Connections(connectionProps: ConnectionsProps) {
-   const { server, projectName, accessToken } = connectionProps;
+export default function Connections() {
+   const { server, projectName, accessToken } = usePackage();
+
    const { data, isSuccess, isError, error } = useQuery(
       {
          queryKey: ["connections", server, projectName],
@@ -50,6 +46,7 @@ export default function Connections(connectionProps: ConnectionsProps) {
                },
             }),
          retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
@@ -98,9 +95,10 @@ export default function Connections(connectionProps: ConnectionsProps) {
                   <Typography variant="body2">No Connections</Typography>
                )}
                {isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     {`${projectName} - ${error.message}`}
-                  </Typography>
+                  <ApiErrorDisplay
+                     error={error}
+                     context={`${projectName} > Connections`}
+                  />
                )}
             </Box>
          </StyledCardContent>