@malloy-publisher/sdk 0.0.17 → 0.0.18

package/.prettierrc

@@ -1,4 +1,4 @@
 {
-    "printWidth": 80,
-    "tabWidth": 3
-  }
+   "printWidth": 80,
+   "tabWidth": 3
+}

package/README.md

@@ -1,4 +1,3 @@
 # Malloy Publisher SDK
 
 The Malloy Publisher SDK is a comprehensive toolkit designed to facilitate the development and testing of Malloy packages.
-

package/openapitools.json

@@ -1,7 +1,7 @@
 {
-  "$schema": "./node_modules/@openapitools/openapi-generator-cli/config.schema.json",
-  "spaces": 2,
-  "generator-cli": {
-    "version": "7.8.0"
-  }
+   "$schema": "./node_modules/@openapitools/openapi-generator-cli/config.schema.json",
+   "spaces": 2,
+   "generator-cli": {
+      "version": "7.8.0"
+   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@malloy-publisher/sdk",
    "description": "Malloy Publisher SDK",
-   "version": "0.0.17",
+   "version": "0.0.18",
    "type": "module",
    "main": "dist/index.cjs.js",
    "module": "dist/index.es.js",
@@ -41,6 +41,7 @@
       "@mui/x-tree-view": "^7.16.0",
       "@react-spring/web": "^9.7.5",
       "@tanstack/react-query": "^5.59.16",
+      "@uiw/react-md-editor": "^4.0.6",
       "axios": "^1.7.7",
       "markdown-to-jsx": "^7.5.0",
       "react-router-dom": "^6.26.1"

package/src/components/Model/Model.tsx

@@ -11,47 +11,28 @@ import {
    Tabs,
    Tab,
 } from "@mui/material";
-import { QueryClient, useMutation, useQuery } from "@tanstack/react-query";
+import { QueryClient, useQuery } from "@tanstack/react-query";
 import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import axios from "axios";
-import { Configuration, ModelsApi, QueryresultsApi } from "../../client";
+import { Configuration, ModelsApi } from "../../client";
 import { ModelCell } from "./ModelCell";
-import {
-   StyledCard,
-   StyledCardContent,
-   StyledCardMedia,
-   StyledExplorerContent,
-   StyledExplorerPage,
-} from "../styles";
+import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { highlight } from "../highlighter";
-import {
-   MalloyExplorerProvider,
-   SourcePanel,
-   QueryPanel,
-   ResultPanel,
-} from "@malloydata/malloy-explorer";
-import * as Malloy from "@malloydata/malloy-interfaces";
-import * as QueryBuilder from "@malloydata/malloy-query-builder";
 
 import "@malloydata/malloy-explorer/styles.css";
-axios.defaults.baseURL = "http://localhost:4000";
+import { usePublisherPackage } from "../Package/PublisherPackageProvider";
+import { SourceExplorerComponent } from "./SourcesExplorer";
 const modelsApi = new ModelsApi(new Configuration());
-const queryResultsApi = new QueryresultsApi(new Configuration());
 
 const queryClient = new QueryClient();
 
 interface ModelProps {
-   server?: string;
-   projectName: string;
-   packageName: string;
    modelPath: string;
    versionId?: string;
    expandResults?: boolean;
    hideResultIcons?: boolean;
    expandEmbeddings?: boolean;
    hideEmbeddingIcons?: boolean;
-   accessToken?: string;
 }
 
 // Note: For this to properly render outside of publisher,
@@ -59,16 +40,11 @@ interface ModelProps {
 // import "@malloy-publisher/sdk/malloy-explorer.css";
 
 export default function Model({
-   server,
-   projectName,
-   packageName,
    modelPath,
-   versionId,
    expandResults,
    hideResultIcons,
    expandEmbeddings,
    hideEmbeddingIcons,
-   accessToken,
 }: ModelProps) {
    const [embeddingExpanded, setEmbeddingExpanded] =
       React.useState<boolean>(false);
@@ -76,8 +52,9 @@ export default function Model({
       React.useState<string>();
    const [selectedTab, setSelectedTab] = React.useState(0);
 
+   const { server, projectName, packageName, versionId, accessToken } =
+      usePublisherPackage();
    const modelCodeSnippet = getModelCodeSnippet(server, packageName, modelPath);
-
    useEffect(() => {
       highlight(modelCodeSnippet, "typescript").then((code) => {
          setHighlightedEmbedCode(code);
@@ -105,7 +82,6 @@ export default function Model({
       },
       queryClient,
    );
-
    if (isLoading) {
       return (
          <Typography sx={{ p: "20px", m: "auto" }}>
@@ -225,13 +201,12 @@ export default function Model({
                {Array.isArray(data.data.sourceInfos) &&
                   data.data.sourceInfos.length > 0 && (
                      <SourceExplorerComponent
-                        server={server}
-                        versionId={versionId}
-                        accessToken={accessToken}
-                        modelPath={modelPath}
-                        projectName={projectName}
-                        packageName={packageName}
-                        source={data.data.sourceInfos[selectedTab]}
+                        sourceAndPath={{
+                           modelPath,
+                           sourceInfo: JSON.parse(
+                              data.data.sourceInfos[selectedTab],
+                           ),
+                        }}
                      />
                   )}
                {data.data.queries?.length > 0 && (
@@ -286,129 +261,3 @@ function getModelCodeSnippet(
    accessToken={accessToken}
 />`;
 }
-
-function SourceExplorerComponent({
-   server,
-   versionId,
-   accessToken,
-   modelPath,
-   projectName,
-   packageName,
-   source,
-}) {
-   const [query, setQuery] = React.useState<Malloy.Query | undefined>(
-      undefined,
-   );
-   const [result, setResult] = React.useState<Malloy.Result | undefined>(
-      undefined,
-   );
-
-   if (!source) return null;
-   let sourceInfo;
-   try {
-      sourceInfo = JSON.parse(source);
-   } catch {
-      return null;
-   }
-
-   const mutation = useMutation(
-      {
-         mutationFn: () =>
-            queryResultsApi.executeQuery(
-               projectName,
-               packageName,
-               modelPath,
-               new QueryBuilder.ASTQuery({
-                  source: sourceInfo,
-                  query,
-               }).toMalloy(),
-               undefined,
-               // sourceInfo.name,
-               undefined,
-               versionId,
-               {
-                  baseURL: server,
-                  withCredentials: !accessToken,
-                  headers: {
-                     Authorization: accessToken && `Bearer ${accessToken}`,
-                  },
-               },
-            ),
-         onSuccess: (data) => {
-            if (data) {
-               const parsedResult = JSON.parse(data.data.result);
-               setResult(parsedResult as Malloy.Result);
-            }
-         },
-      },
-      queryClient,
-   );
-
-   const [oldSourceInfo, setOldSourceInfo] = React.useState(sourceInfo.name);
-
-   // This hack is needed since sourceInfo is updated before
-   // query is reset, which results in the query not being found
-   // because it does not exist on the new source.
-   React.useEffect(() => {
-      if (oldSourceInfo !== sourceInfo.name) {
-         setOldSourceInfo(sourceInfo.name);
-         setQuery(undefined);
-         setResult(undefined);
-      }
-   }, [source, sourceInfo]);
-
-   if (oldSourceInfo !== sourceInfo.name) {
-      return <div>Loading...</div>;
-   }
-
-   return (
-      <StyledExplorerPage key={sourceInfo.name}>
-         <StyledExplorerContent>
-            <MalloyExplorerProvider
-               source={sourceInfo}
-               query={query}
-               setQuery={setQuery}
-            >
-               <div style={{ height: "100%", width: "20%" }}>
-                  <SourcePanel
-                     onRefresh={() => {
-                        setQuery(undefined);
-                        setResult(undefined);
-                     }}
-                  />
-               </div>
-               <div style={{ height: "100%", width: "30%" }}>
-                  <QueryPanel
-                     runQuery={() => {
-                        mutation.mutate();
-                     }}
-                  />
-               </div>
-               <div style={{ height: "100%", width: "50%" }}>
-                  <ResultPanel
-                     source={sourceInfo}
-                     draftQuery={query}
-                     setDraftQuery={setQuery}
-                     submittedQuery={
-                        query
-                           ? {
-                                executionState: mutation.isPending
-                                   ? "running"
-                                   : "finished",
-                                response: {
-                                   result: result,
-                                },
-                                query,
-                                queryResolutionStartMillis: Date.now(),
-                                onCancel: mutation.reset,
-                             }
-                           : undefined
-                     }
-                     options={{ showRawQuery: true }}
-                  />
-               </div>
-            </MalloyExplorerProvider>
-         </StyledExplorerContent>
-      </StyledExplorerPage>
-   );
-}

package/src/components/Model/SourcesExplorer.tsx

@@ -0,0 +1,302 @@
+import { CardActions, Button } from "@mui/material";
+import { Box, Stack } from "@mui/system";
+import {
+   StyledCard,
+   StyledCardContent,
+   StyledCardMedia,
+   StyledExplorerContent,
+   StyledExplorerPage,
+} from "../styles";
+import * as Malloy from "@malloydata/malloy-interfaces";
+import * as QueryBuilder from "@malloydata/malloy-query-builder";
+
+import React from "react";
+import { QueryClient, useMutation } from "@tanstack/react-query";
+import { Configuration, QueryresultsApi } from "../../client";
+import { usePublisherPackage } from "../Package/PublisherPackageProvider";
+import {
+   MalloyExplorerProvider,
+   QueryPanel,
+   ResultPanel,
+   SourcePanel,
+} from "@malloydata/malloy-explorer";
+import { styled } from "@mui/material/styles";
+
+const queryResultsApi = new QueryresultsApi(new Configuration());
+const queryClient = new QueryClient();
+
+export interface SourceAndPath {
+   modelPath: string;
+   sourceInfo: Malloy.SourceInfo;
+}
+
+// Add a styled component for the multi-row tab bar
+const MultiRowTabBar = styled(Box)(({ theme }) => ({
+   display: "flex",
+   flexWrap: "wrap",
+   gap: theme.spacing(0.5),
+   borderBottom: `1px solid ${theme.palette.divider}`,
+   minHeight: 36,
+}));
+
+const MultiRowTab = styled(Button)<{ selected?: boolean }>(
+   ({ theme, selected }) => ({
+      minHeight: 36,
+      padding: theme.spacing(0.5, 2),
+      borderRadius: theme.shape.borderRadius,
+      background: selected ? theme.palette.action.selected : "none",
+      color: selected ? theme.palette.primary.main : theme.palette.text.primary,
+      fontWeight: selected ? 600 : 400,
+      border: selected
+         ? `1px solid ${theme.palette.primary.main}`
+         : `1px solid transparent`,
+      boxShadow: selected ? theme.shadows[1] : "none",
+      textTransform: "uppercase",
+      "&:hover": {
+         background: theme.palette.action.hover,
+         border: `1px solid ${theme.palette.primary.light}`,
+      },
+   }),
+);
+
+export interface SourceExplorerProps {
+   sourceAndPaths: SourceAndPath[];
+   existingQer?: QueryExplorerResult;
+   existingSourceName?: string;
+   saveResult?: (
+      modelPath: string,
+      sourceName: string,
+      qer: QueryExplorerResult,
+   ) => void;
+}
+
+/**
+ * Component for Exploring a set of sources.
+ * Sources are provided as a list of SourceAndPath objects where each entry
+ * Maps from a model path to a source info object.
+ * It is expected that multiple sourceInfo entries will correspond to the same
+ * model path.
+ */
+export function SourcesExplorer({
+   sourceAndPaths,
+   saveResult,
+   existingQer,
+   existingSourceName,
+}: SourceExplorerProps) {
+   const [selectedTab, setSelectedTab] = React.useState(
+      existingSourceName
+         ? sourceAndPaths.findIndex(
+              (entry) => entry.sourceInfo.name === existingSourceName,
+           )
+         : 0,
+   );
+
+   const [qer, setQer] = React.useState<QueryExplorerResult | undefined>(
+      existingQer || emptyQueryExplorerResult(),
+   );
+
+   return (
+      <StyledCard variant="outlined">
+         <StyledCardContent>
+            <Stack
+               sx={{
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+               }}
+            >
+               {sourceAndPaths.length > 0 && (
+                  <MultiRowTabBar>
+                     {sourceAndPaths.map((sourceAndPath, idx) => (
+                        <MultiRowTab
+                           key={sourceAndPath.sourceInfo.name || idx}
+                           selected={selectedTab === idx}
+                           onClick={() => setSelectedTab(idx)}
+                        >
+                           {sourceAndPath.sourceInfo.name ||
+                              `Source ${idx + 1}`}
+                        </MultiRowTab>
+                     ))}
+                  </MultiRowTabBar>
+               )}
+               {saveResult && (
+                  <CardActions
+                     sx={{
+                        padding: "0px 10px 0px 10px",
+                        mb: "auto",
+                        mt: "auto",
+                     }}
+                  >
+                     <Button
+                        onClick={() =>
+                           saveResult(
+                              sourceAndPaths[selectedTab].modelPath,
+                              sourceAndPaths[selectedTab].sourceInfo.name,
+                              qer,
+                           )
+                        }
+                     >
+                        Save
+                     </Button>
+                  </CardActions>
+               )}
+            </Stack>
+         </StyledCardContent>
+         <StyledCardMedia>
+            <Stack spacing={2} component="section">
+               <SourceExplorerComponent
+                  sourceAndPath={sourceAndPaths[selectedTab]}
+                  existingQer={qer}
+                  onChange={setQer}
+               />
+               <Box height="5px" />
+            </Stack>
+         </StyledCardMedia>
+      </StyledCard>
+   );
+}
+
+interface SourceExplorerComponentProps {
+   sourceAndPath: SourceAndPath;
+   existingQer?: QueryExplorerResult;
+   onChange?: (qer: QueryExplorerResult) => void;
+}
+
+export interface QueryExplorerResult {
+   query: string | undefined;
+   malloyQuery: Malloy.Query;
+   malloyResult: Malloy.Result | undefined;
+}
+
+export function emptyQueryExplorerResult(): QueryExplorerResult {
+   return {
+      query: undefined,
+      malloyQuery: undefined,
+      malloyResult: undefined,
+   };
+}
+export function SourceExplorerComponent({
+   sourceAndPath,
+   onChange,
+   existingQer,
+}: SourceExplorerComponentProps) {
+   const [qer, setQer] = React.useState<QueryExplorerResult>(
+      existingQer || emptyQueryExplorerResult(),
+   );
+
+   React.useEffect(() => {
+      if (onChange) {
+         onChange(qer);
+      }
+   }, [onChange, qer]);
+   const { server, projectName, packageName, versionId, accessToken } =
+      usePublisherPackage();
+   const mutation = useMutation(
+      {
+         mutationFn: () => {
+            const malloy = new QueryBuilder.ASTQuery({
+               source: sourceAndPath.sourceInfo,
+               query: qer?.malloyQuery,
+            }).toMalloy();
+            setQer({
+               ...qer,
+               query: malloy,
+            });
+            return queryResultsApi.executeQuery(
+               projectName,
+               packageName,
+               sourceAndPath.modelPath,
+               malloy,
+               undefined,
+               // sourceInfo.name,
+               undefined,
+               versionId,
+               {
+                  baseURL: server,
+                  withCredentials: !accessToken,
+                  headers: {
+                     Authorization: accessToken && `Bearer ${accessToken}`,
+                  },
+               },
+            );
+         },
+         onSuccess: (data) => {
+            if (data) {
+               const parsedResult = JSON.parse(data.data.result);
+               setQer({
+                  ...qer,
+                  malloyResult: parsedResult as Malloy.Result,
+               });
+            }
+         },
+      },
+      queryClient,
+   );
+
+   const [oldSourceInfo, setOldSourceInfo] = React.useState(
+      sourceAndPath.sourceInfo.name,
+   );
+
+   // This hack is needed since sourceInfo is updated before
+   // query is reset, which results in the query not being found
+   // because it does not exist on the new source.
+   React.useEffect(() => {
+      if (oldSourceInfo !== sourceAndPath.sourceInfo.name) {
+         setOldSourceInfo(sourceAndPath.sourceInfo.name);
+         setQer(emptyQueryExplorerResult());
+      }
+   }, [sourceAndPath, oldSourceInfo]);
+
+   if (oldSourceInfo !== sourceAndPath.sourceInfo.name) {
+      return <div>Loading...</div>;
+   }
+
+   return (
+      <StyledExplorerPage key={sourceAndPath.sourceInfo.name}>
+         <StyledExplorerContent>
+            <MalloyExplorerProvider
+               source={sourceAndPath.sourceInfo}
+               query={qer?.malloyQuery}
+               setQuery={(query) => setQer({ ...qer, malloyQuery: query })}
+            >
+               <div style={{ height: "100%", width: "20%" }}>
+                  <SourcePanel
+                     onRefresh={() => setQer(emptyQueryExplorerResult())}
+                  />
+               </div>
+               <div style={{ height: "100%", width: "30%" }}>
+                  <QueryPanel
+                     runQuery={() => {
+                        mutation.mutate();
+                     }}
+                  />
+               </div>
+               <div style={{ height: "100%", width: "50%" }}>
+                  <ResultPanel
+                     source={sourceAndPath.sourceInfo}
+                     draftQuery={qer?.malloyQuery}
+                     setDraftQuery={(malloyQuery) =>
+                        setQer({ ...qer, malloyQuery: malloyQuery })
+                     }
+                     submittedQuery={
+                        qer?.malloyQuery
+                           ? {
+                                executionState: mutation.isPending
+                                   ? "running"
+                                   : "finished",
+                                response: {
+                                   result: qer.malloyResult,
+                                },
+                                query: qer.malloyQuery,
+                                queryResolutionStartMillis: Date.now(),
+                                onCancel: mutation.reset,
+                             }
+                           : undefined
+                     }
+                     options={{ showRawQuery: true }}
+                  />
+               </div>
+            </MalloyExplorerProvider>
+         </StyledExplorerContent>
+      </StyledExplorerPage>
+   );
+}

package/src/components/Model/index.ts

@@ -1 +1,4 @@
 export { default as Model } from "./Model";
+export { SourcesExplorer } from "./SourcesExplorer";
+export { SourceExplorerComponent } from "./SourcesExplorer";
+export type { SourceAndPath } from "./SourcesExplorer";

package/src/components/MutableNotebook/BrowserNotebookStorage.ts

@@ -0,0 +1,58 @@
+import type { NotebookStorage, UserContext } from "./NotebookStorage";
+
+export class BrowserNotebookStorage implements NotebookStorage {
+   private makeKey(context: UserContext, path?: string): string {
+      let key = `BROWSER_NOTEBOOK_STORAGE__${context.project}/${context.package}`;
+      if (path) {
+         key += `/${path}`;
+      }
+      return key;
+   }
+
+   listNotebooks(context: UserContext): string[] {
+      const prefix = this.makeKey(context);
+      const keys: string[] = [];
+      for (let i = 0; i < localStorage.length; i++) {
+         const key = localStorage.key(i);
+         if (key && key.startsWith(prefix + "/")) {
+            // Extract the notebook path after the prefix
+            const notebookPath = key.substring(prefix.length + 1);
+            keys.push(notebookPath);
+         }
+      }
+      return keys;
+   }
+
+   getNotebook(context: UserContext, path: string): string {
+      const key = this.makeKey(context, path);
+      const notebook = localStorage.getItem(key);
+      if (notebook === null) {
+         throw new Error(`Notebook not found at path: ${path}`);
+      }
+      return notebook;
+   }
+
+   deleteNotebook(context: UserContext, path: string): void {
+      const key = this.makeKey(context, path);
+      if (localStorage.getItem(key) === null) {
+         throw new Error(`Notebook not found at path: ${path}`);
+      }
+      localStorage.removeItem(key);
+   }
+
+   saveNotebook(context: UserContext, path: string, notebook: string): void {
+      const key = this.makeKey(context, path);
+      localStorage.setItem(key, notebook);
+   }
+
+   moveNotebook(context: UserContext, from: string, to: string): void {
+      const fromKey = this.makeKey(context, from);
+      const toKey = this.makeKey(context, to);
+      const notebook = localStorage.getItem(fromKey);
+      if (notebook === null) {
+         throw new Error(`Notebook not found at path: ${from}`);
+      }
+      localStorage.setItem(toKey, notebook);
+      localStorage.removeItem(fromKey);
+   }
+}

package/src/components/MutableNotebook/EditableMalloyCell.tsx

@@ -0,0 +1,47 @@
+import { SourceAndPath, SourcesExplorer } from "../Model";
+import { NotebookCellValue } from "../NotebookManager";
+
+interface EditableMalloyCellProps {
+   cell: NotebookCellValue;
+   sourceAndPaths: SourceAndPath[];
+   onCellChange: (cell: NotebookCellValue) => void;
+
+   onClose: () => void;
+}
+
+export function EditableMalloyCell({
+   cell,
+   sourceAndPaths,
+   onCellChange,
+   onClose,
+}: EditableMalloyCellProps) {
+   const qer = {
+      query: cell.value,
+      malloyResult: cell.result ? JSON.parse(cell.result) : undefined,
+      malloyQuery: cell.queryInfo ? JSON.parse(cell.queryInfo) : undefined,
+   };
+   return (
+      <SourcesExplorer
+         sourceAndPaths={sourceAndPaths}
+         existingQer={qer}
+         existingSourceName={cell.sourceName}
+         saveResult={(modelPath, sourceName, qer) => {
+            // Convert the results of the Query Explorer into
+            // the stringified JSON objects that are stored in the cell.
+            onCellChange({
+               ...cell,
+               value: qer.query,
+               result: qer.malloyResult
+                  ? JSON.stringify(qer.malloyResult)
+                  : undefined,
+               queryInfo: qer.malloyQuery
+                  ? JSON.stringify(qer.malloyQuery)
+                  : undefined,
+               sourceName,
+               modelPath,
+            });
+            onClose();
+         }}
+      />
+   );
+}