@malloy-publisher/sdk 0.0.34 → 0.0.35

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-TNDWxBXR.cjs");exports.BrowserNotebookStorage=e.BrowserNotebookStorage;exports.ConnectionExplorer=e.ConnectionExplorer;exports.Home=e.Home;exports.Model=e.Model;exports.MutableNotebook=e.MutableNotebook;exports.Notebook=e.Notebook;exports.NotebookStorageProvider=e.NotebookStorageProvider;exports.Package=e.Package;exports.Project=e.Project;exports.PublisherPackageProvider=e.PublisherPackageProvider;exports.QueryResult=e.QueryResult;exports.SourceExplorerComponent=e.SourceExplorerComponent;exports.SourcesExplorer=e.SourcesExplorer;exports.useNotebookStorage=e.useNotebookStorage;exports.usePublisherPackage=e.usePublisherPackage;exports.useRouterClickHandler=e.useRouterClickHandler;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-nKbldp0y.cjs");exports.BrowserNotebookStorage=e.BrowserNotebookStorage;exports.ConnectionExplorer=e.ConnectionExplorer;exports.Home=e.Home;exports.Model=e.Model;exports.MutableNotebook=e.MutableNotebook;exports.Notebook=e.Notebook;exports.NotebookStorageProvider=e.NotebookStorageProvider;exports.Package=e.Package;exports.PackageProvider=e.PackageProvider;exports.Project=e.Project;exports.ProjectProvider=e.ProjectProvider;exports.PublisherPackageProvider=e.PackageProvider;exports.QueryResult=e.QueryResult;exports.SourceExplorerComponent=e.SourceExplorerComponent;exports.SourcesExplorer=e.SourcesExplorer;exports.useNotebookStorage=e.useNotebookStorage;exports.usePackage=e.usePackage;exports.useProject=e.useProject;exports.usePublisherPackage=e.usePackage;exports.useRouterClickHandler=e.useRouterClickHandler;

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@malloy-publisher/sdk",
    "description": "Malloy Publisher SDK",
-   "version": "0.0.34",
+   "version": "0.0.35",
    "type": "module",
    "main": "dist/index.cjs.js",
    "module": "dist/index.es.js",

package/src/components/ApiErrorDisplay.tsx

@@ -0,0 +1,40 @@
+import { Typography } from "@mui/material";
+import React from "react";
+
+export interface ApiError extends Error {
+   status?: number;
+   data?: {
+      code: string;
+      message: string;
+   };
+}
+
+interface ApiErrorDisplayProps {
+   error: ApiError;
+   context?: string;
+}
+
+export function ApiErrorDisplay({ error, context }: ApiErrorDisplayProps) {
+   return (
+      <>
+         {context && (
+            <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
+               {context}
+            </Typography>
+         )}
+         {error.data && (
+            <pre
+               style={{
+                  whiteSpace: "pre-wrap",
+                  color: "red",
+                  backgroundColor: "black",
+                  padding: "10px",
+                  margin: "auto",
+               }}
+            >
+               {error.data.message}
+            </pre>
+         )}
+      </>
+   );
+}

package/src/components/Home/Home.tsx

@@ -2,6 +2,7 @@ import { Grid, Typography } from "@mui/material";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { ProjectsApi, Configuration } from "../../client";
 import axios from "axios";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 axios.defaults.baseURL = "http://localhost:4000";
 const projectsApi = new ProjectsApi(new Configuration());
@@ -13,19 +14,25 @@ interface HomeProps {
 }
 
 export default function Home({ server, navigate }: HomeProps) {
-   const { data, isSuccess } = useQuery(
+   const { data, isSuccess, isError, error } = useQuery(
       {
          queryKey: ["projects", server],
          queryFn: () =>
             projectsApi.listProjects({
                baseURL: server,
             }),
+         retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
 
    console.log(JSON.stringify(data?.data, null, 2));
 
+   if (isError) {
+      return <ApiErrorDisplay error={error} context="Projects List" />;
+   }
+
    if (isSuccess) {
       if (data.data.length === 0) {
          return <Typography variant="h4">No projects found</Typography>;

package/src/components/Model/Model.tsx

@@ -14,15 +14,17 @@ import {
 } from "@mui/material";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import React, { useEffect } from "react";
-import { Configuration, ModelsApi } from "../../client";
+import { Configuration, ModelsApi, CompiledModel } from "../../client";
 import { highlight } from "../highlighter";
 import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { ModelCell } from "./ModelCell";
+import { ApiErrorDisplay, ApiError } from "../ApiErrorDisplay";
 
 import "@malloydata/malloy-explorer/styles.css";
-import { usePublisherPackage } from "../Package/PublisherPackageProvider";
+import { usePackage } from "../Package/PackageProvider";
 import { SourceExplorerComponent } from "./SourcesExplorer";
 import NamedQueries from "./NamedQueries";
+
 const modelsApi = new ModelsApi(new Configuration());
 
 const queryClient = new QueryClient();
@@ -54,7 +56,7 @@ export default function Model({
    const [selectedTab, setSelectedTab] = React.useState(0);
 
    const { server, projectName, packageName, versionId, accessToken } =
-      usePublisherPackage();
+      usePackage();
    const modelCodeSnippet = getModelCodeSnippet(server, packageName, modelPath);
    useEffect(() => {
       highlight(modelCodeSnippet, "typescript").then((code) => {
@@ -62,7 +64,10 @@ export default function Model({
       });
    }, [embeddingExpanded, modelCodeSnippet]);
 
-   const { data, isError, isLoading, error } = useQuery(
+   const { data, isError, isLoading, error } = useQuery<
+      CompiledModel,
+      ApiError
+   >(
       {
          queryKey: [
             "package",
@@ -72,17 +77,46 @@ export default function Model({
             modelPath,
             versionId,
          ],
-         queryFn: () =>
-            modelsApi.getModel(projectName, packageName, modelPath, versionId, {
-               baseURL: server,
-               withCredentials: !accessToken,
-               headers: {
-                  Authorization: accessToken && `Bearer ${accessToken}`,
-               },
-            }),
+         queryFn: async () => {
+            try {
+               const response = await modelsApi.getModel(
+                  projectName,
+                  packageName,
+                  modelPath,
+                  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) {
+                  console.log("axios err", err);
+                  const axiosError = err as any;
+                  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,
    );
+
    if (isLoading) {
       return (
          <Typography sx={{ p: "20px", m: "auto" }}>
@@ -92,10 +126,12 @@ export default function Model({
    }
 
    if (isError) {
+      console.log("error", error);
       return (
-         <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-            {`${packageName} > ${modelPath} > ${versionId} - ${error.message}`}
-         </Typography>
+         <ApiErrorDisplay
+            error={error}
+            context={`${packageName} > ${modelPath}`}
+         />
       );
    }
    return (
@@ -107,8 +143,8 @@ export default function Model({
                   justifyContent: "space-between",
                }}
             >
-               {Array.isArray(data.data.sourceInfos) &&
-                  data.data.sourceInfos.length > 0 && (
+               {Array.isArray(data.sourceInfos) &&
+                  data.sourceInfos.length > 0 && (
                      <Tabs
                         value={selectedTab}
                         onChange={(_, newValue) => setSelectedTab(newValue)}
@@ -120,7 +156,7 @@ export default function Model({
                            minHeight: 36,
                         }}
                      >
-                        {data.data.sourceInfos.map((source, idx) => {
+                        {data.sourceInfos.map((source, idx) => {
                            let sourceInfo;
                            try {
                               sourceInfo = JSON.parse(source);
@@ -203,18 +239,18 @@ export default function Model({
          <StyledCardMedia>
             <Stack spacing={2} component="section">
                {/* Only render the selected sourceInfo */}
-               {Array.isArray(data.data.sourceInfos) &&
-                  data.data.sourceInfos.length > 0 && (
+               {Array.isArray(data.sourceInfos) &&
+                  data.sourceInfos.length > 0 && (
                      <SourceExplorerComponent
                         sourceAndPath={{
                            modelPath,
                            sourceInfo: JSON.parse(
-                              data.data.sourceInfos[selectedTab],
+                              data.sourceInfos[selectedTab],
                            ),
                         }}
                      />
                   )}
-               {data.data.queries?.length > 0 && (
+               {data.queries?.length > 0 && (
                   <StyledCard
                      variant="outlined"
                      sx={{ padding: "0px 10px 0px 10px" }}
@@ -225,20 +261,15 @@ export default function Model({
                         </Typography>
                      </StyledCardContent>
                      <Stack spacing={1} component="section">
-                        {data.data.queries.map((query) => (
+                        {data.queries.map((query) => (
                            <ModelCell
                               key={query.name}
-                              server={server}
-                              projectName={projectName}
-                              packageName={packageName}
                               modelPath={modelPath}
-                              versionId={versionId}
                               queryName={query.name}
                               expandResult={expandResults}
                               hideResultIcon={hideResultIcons}
                               expandEmbedding={expandEmbeddings}
                               hideEmbeddingIcon={hideEmbeddingIcons}
-                              accessToken={accessToken}
                               noView={true}
                               annotations={query.annotations}
                            />

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

@@ -293,20 +293,11 @@ export function MutableCell({
                         />
                      ))}
                   {!editingMalloy && cell.result && (
-                     <>
-                        <CardContent
-                           sx={{ maxHeight: "500px", overflow: "auto" }}
-                        >
-                           {/* TODO: Integrate expando better */}
-                           <Suspense fallback="Loading malloy...">
-                              <ResultContainer
-                                 result={cell.result}
-                                 minHeight={500}
-                                 maxHeight={500}
-                              />
-                           </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",