@malloy-publisher/sdk 0.0.81 → 0.0.82

package/package.json

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

package/src/components/Model/Model.tsx

@@ -1,34 +1,24 @@
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
 import {
-   Box,
    CardActions,
    Collapse,
    Divider,
    IconButton,
    Stack,
-   Tab,
-   Tabs,
    Tooltip,
    Typography,
 } from "@mui/material";
 import React, { useEffect } from "react";
-import { Configuration, ModelsApi, CompiledModel } from "../../client";
 import { highlight } from "../highlighter";
-import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
-import { ModelCell } from "./ModelCell";
+import { StyledCard, StyledCardContent } from "../styles";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 import "@malloydata/malloy-explorer/styles.css";
-import { usePackage } from "../Package/PackageProvider";
-import {
-   QueryExplorerResult,
-   SourceExplorerComponent,
-} from "./SourcesExplorer";
+import { QueryExplorerResult } from "./SourcesExplorer";
 import { Loading } from "../Loading";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
-
-const modelsApi = new ModelsApi(new Configuration());
+import { ModelExplorer } from "./ModelExplorer";
+import { useModelData } from "./useModelData";
 
 interface ModelProps {
    modelPath: string;
@@ -46,6 +36,7 @@ interface ModelProps {
 
 export default function Model({
    modelPath,
+   versionId,
    expandResults,
    hideResultIcons,
    expandEmbeddings,
@@ -56,9 +47,8 @@ export default function Model({
       React.useState<boolean>(false);
    const [highlightedEmbedCode, setHighlightedEmbedCode] =
       React.useState<string>();
-   const [selectedTab, setSelectedTab] = React.useState(0);
 
-   const { projectName, packageName, versionId } = usePackage();
+   const { isError, isLoading, error } = useModelData(modelPath, versionId);
    const modelCodeSnippet = getModelCodeSnippet(modelPath);
    useEffect(() => {
       highlight(modelCodeSnippet, "typescript").then((code) => {
@@ -66,33 +56,13 @@ export default function Model({
       });
    }, [embeddingExpanded, modelCodeSnippet]);
 
-   const { data, isError, isLoading, error } =
-      useQueryWithApiError<CompiledModel>({
-         queryKey: ["package", projectName, packageName, modelPath, versionId],
-         queryFn: async (config) => {
-            const response = await modelsApi.getModel(
-               projectName,
-               packageName,
-               modelPath,
-               versionId,
-               config,
-            );
-            return response.data;
-         },
-      });
-
    if (isLoading) {
       return <Loading text="Fetching Model..." />;
    }
 
    if (isError) {
       console.log("error", error);
-      return (
-         <ApiErrorDisplay
-            error={error}
-            context={`${packageName} > ${modelPath}`}
-         />
-      );
+      return <ApiErrorDisplay error={error} context={`Model > ${modelPath}`} />;
    }
    return (
       <StyledCard variant="outlined">
@@ -100,39 +70,9 @@ export default function Model({
             <Stack
                sx={{
                   flexDirection: "row",
-                  justifyContent: "space-between",
+                  justifyContent: "flex-end",
                }}
             >
-               {Array.isArray(data.sourceInfos) &&
-                  data.sourceInfos.length > 0 && (
-                     <Tabs
-                        value={selectedTab}
-                        onChange={(_, newValue) => setSelectedTab(newValue)}
-                        variant="scrollable"
-                        scrollButtons="auto"
-                        sx={{
-                           borderBottom: 1,
-                           borderColor: "divider",
-                           minHeight: 36,
-                        }}
-                     >
-                        {data.sourceInfos.map((source, idx) => {
-                           let sourceInfo;
-                           try {
-                              sourceInfo = JSON.parse(source);
-                           } catch {
-                              sourceInfo = { name: String(idx) };
-                           }
-                           return (
-                              <Tab
-                                 key={sourceInfo.name || idx}
-                                 label={sourceInfo.name || `Source ${idx + 1}`}
-                                 sx={{ minHeight: 36 }}
-                              />
-                           );
-                        })}
-                     </Tabs>
-                  )}
                {!hideEmbeddingIcons && (
                   <CardActions
                      sx={{
@@ -196,52 +136,15 @@ export default function Model({
             </Collapse>
             <Divider />
          </StyledCardContent>
-         <StyledCardMedia>
-            <Stack spacing={2} component="section">
-               {/* Only render the selected sourceInfo */}
-               {Array.isArray(data.sourceInfos) &&
-                  data.sourceInfos.length > 0 && (
-                     <SourceExplorerComponent
-                        sourceAndPath={{
-                           modelPath,
-                           sourceInfo: JSON.parse(
-                              data.sourceInfos[selectedTab],
-                           ),
-                        }}
-                        onChange={onChange}
-                     />
-                  )}
-               {data.queries?.length > 0 && (
-                  <StyledCard
-                     variant="outlined"
-                     sx={{ padding: "0px 10px 0px 10px" }}
-                  >
-                     <StyledCardContent sx={{ p: "10px" }}>
-                        <Typography variant="subtitle1">
-                           Named Queries
-                        </Typography>
-                     </StyledCardContent>
-                     <Stack spacing={1} component="section">
-                        {data.queries.map((query) => (
-                           <ModelCell
-                              key={query.name}
-                              modelPath={modelPath}
-                              queryName={query.name}
-                              expandResult={expandResults}
-                              hideResultIcon={hideResultIcons}
-                              expandEmbedding={expandEmbeddings}
-                              hideEmbeddingIcon={hideEmbeddingIcons}
-                              noView={true}
-                              annotations={query.annotations}
-                           />
-                        ))}
-                     </Stack>
-                     <Box height="10px" />
-                  </StyledCard>
-               )}
-               <Box height="5px" />
-            </Stack>
-         </StyledCardMedia>
+         <ModelExplorer
+            modelPath={modelPath}
+            versionId={versionId}
+            expandResults={expandResults}
+            hideResultIcons={hideResultIcons}
+            expandEmbeddings={expandEmbeddings}
+            hideEmbeddingIcons={hideEmbeddingIcons}
+            onChange={onChange}
+         />
       </StyledCard>
    );
 }

package/src/components/Model/ModelExplorer.tsx

@@ -0,0 +1,138 @@
+import React from "react";
+import { Box, Stack, Typography, Tabs, Tab } from "@mui/material";
+import { StyledCard, StyledCardContent } from "../styles";
+import { ModelCell } from "./ModelCell";
+import {
+   QueryExplorerResult,
+   SourceExplorerComponent,
+} from "./SourcesExplorer";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
+import { useModelData } from "./useModelData";
+
+export interface ModelExplorerProps {
+   modelPath: string;
+   versionId?: string;
+   /** Display options forwarded to ModelCell */
+   expandResults?: boolean;
+   hideResultIcons?: boolean;
+   expandEmbeddings?: boolean;
+   hideEmbeddingIcons?: boolean;
+   /** Callback when the explorer changes (e.g. when a query is selected). */
+   onChange?: (query: QueryExplorerResult) => void;
+}
+
+/**
+ * ModelExplorer renders the main explorer UI for a Malloy model. It shows the
+ * selected source (via `SourceExplorerComponent`) along with the list of named
+ * queries for that model. This logic was originally embedded inside `Model.tsx`
+ * but has been extracted for easier reuse.
+ */
+export function ModelExplorer({
+   modelPath,
+   versionId,
+   expandResults,
+   hideResultIcons,
+   expandEmbeddings,
+   hideEmbeddingIcons,
+   onChange,
+}: ModelExplorerProps) {
+   const [selectedTab, setSelectedTab] = React.useState(0);
+
+   const { data, isError, isLoading, error } = useModelData(
+      modelPath,
+      versionId,
+   );
+
+   if (isLoading) {
+      return <Loading text="Fetching Model..." />;
+   }
+
+   if (isError) {
+      console.log("error", error);
+      return (
+         <ApiErrorDisplay
+            error={error}
+            context={`ModelExplorer > ${modelPath}`}
+         />
+      );
+   }
+
+   return (
+      <Stack spacing={2} component="section">
+         {/* Render the tabs for source selection */}
+         {Array.isArray(data.sourceInfos) && data.sourceInfos.length > 0 && (
+            <Stack sx={{ flexDirection: "row", justifyContent: "flex-start" }}>
+               <Tabs
+                  value={selectedTab}
+                  onChange={(_, newValue) => setSelectedTab(newValue)}
+                  variant="scrollable"
+                  scrollButtons="auto"
+                  sx={{
+                     borderBottom: 1,
+                     borderColor: "divider",
+                     minHeight: 36,
+                  }}
+               >
+                  {data.sourceInfos.map((source, idx) => {
+                     let sourceInfo;
+                     try {
+                        sourceInfo = JSON.parse(source);
+                     } catch {
+                        sourceInfo = { name: String(idx) };
+                     }
+                     return (
+                        <Tab
+                           key={sourceInfo.name || idx}
+                           label={sourceInfo.name || `Source ${idx + 1}`}
+                           sx={{ minHeight: 36 }}
+                        />
+                     );
+                  })}
+               </Tabs>
+            </Stack>
+         )}
+
+         {/* Render the selected source info */}
+         {Array.isArray(data.sourceInfos) && data.sourceInfos.length > 0 && (
+            <SourceExplorerComponent
+               sourceAndPath={{
+                  modelPath,
+                  sourceInfo: JSON.parse(data.sourceInfos[selectedTab]),
+               }}
+               onChange={onChange}
+            />
+         )}
+
+         {/* Render the named queries */}
+         {data.queries?.length > 0 && (
+            <StyledCard
+               variant="outlined"
+               sx={{ padding: "0px 10px 0px 10px" }}
+            >
+               <StyledCardContent sx={{ p: "10px" }}>
+                  <Typography variant="subtitle1">Named Queries</Typography>
+               </StyledCardContent>
+
+               <Stack spacing={1} component="section">
+                  {data.queries.map((query) => (
+                     <ModelCell
+                        key={query.name}
+                        modelPath={modelPath}
+                        queryName={query.name}
+                        expandResult={expandResults}
+                        hideResultIcon={hideResultIcons}
+                        expandEmbedding={expandEmbeddings}
+                        hideEmbeddingIcon={hideEmbeddingIcons}
+                        noView={true}
+                        annotations={query.annotations}
+                     />
+                  ))}
+               </Stack>
+               <Box height="10px" />
+            </StyledCard>
+         )}
+         <Box height="5px" />
+      </Stack>
+   );
+}

package/src/components/Model/SourcesExplorer.tsx

@@ -235,7 +235,7 @@ function SourceExplorerComponentInner({
 
    const onQueryChange = React.useCallback(
       (malloyQuery: Malloy.Query) => {
-         setQuery({ ...query, malloyQuery });
+         setQuery({ ...query, malloyQuery, malloyResult: undefined });
       },
       [query],
    );
@@ -243,88 +243,75 @@ function SourceExplorerComponentInner({
    if (oldSourceInfo !== sourceAndPath.sourceInfo.name) {
       return <div>Loading...</div>;
    }
-
    return (
-      <StyledExplorerPage key={sourceAndPath.sourceInfo.name}>
-         <StyledExplorerContent>
-            <MalloyExplorerProvider
-               source={sourceAndPath.sourceInfo}
-               query={query?.malloyQuery}
-               onQueryChange={onQueryChange}
-               focusedNestViewPath={focusedNestViewPath}
-               onFocusedNestViewPathChange={setFocusedNestViewPath}
-               onDrill={(params) => {
-                  console.info(params);
+      <StyledExplorerContent key={sourceAndPath.sourceInfo.name}>
+         <MalloyExplorerProvider
+            source={sourceAndPath.sourceInfo}
+            query={query?.malloyQuery}
+            onQueryChange={onQueryChange}
+            focusedNestViewPath={focusedNestViewPath}
+            onFocusedNestViewPathChange={setFocusedNestViewPath}
+            onDrill={(params) => {
+               console.info(params);
+            }}
+         >
+            <div
+               style={{
+                  display: "flex",
+                  height: "100%",
+                  overflowY: "auto",
                }}
             >
-               <div
-                  style={{
-                     display: "flex",
-                     flexDirection: "column",
-                     height: "100%",
-                  }}
+               <ResizableCollapsiblePanel
+                  isInitiallyExpanded={true}
+                  initialWidth={180}
+                  minWidth={180}
+                  icon="database"
+                  title={sourceAndPath.sourceInfo.name}
                >
-                  <div
-                     style={{
-                        display: "flex",
-                        height: "100%",
-                        overflowY: "auto",
+                  <SourcePanel
+                     onRefresh={() => setQuery(emptyQueryExplorerResult())}
+                  />
+               </ResizableCollapsiblePanel>
+               <ResizableCollapsiblePanel
+                  isInitiallyExpanded={true}
+                  initialWidth={280}
+                  minWidth={280}
+                  icon="filterSliders"
+                  title="Query"
+               >
+                  <QueryPanel
+                     runQuery={() => {
+                        mutation.mutate();
                      }}
-                  >
-                     <ResizableCollapsiblePanel
-                        isInitiallyExpanded={true}
-                        initialWidth={180}
-                        minWidth={180}
-                        icon="database"
-                        title={sourceAndPath.sourceInfo.name}
-                     >
-                        <SourcePanel
-                           onRefresh={() =>
-                              setQuery(emptyQueryExplorerResult())
-                           }
-                        />
-                     </ResizableCollapsiblePanel>
-                     <ResizableCollapsiblePanel
-                        isInitiallyExpanded={true}
-                        initialWidth={280}
-                        minWidth={280}
-                        icon="filterSliders"
-                        title="Query"
-                     >
-                        <QueryPanel
-                           runQuery={() => {
-                              mutation.mutate();
-                           }}
-                        />
-                     </ResizableCollapsiblePanel>
-                     <ResultPanel
-                        source={sourceAndPath.sourceInfo}
-                        draftQuery={query?.malloyQuery}
-                        setDraftQuery={(malloyQuery) =>
-                           setQuery({ ...query, malloyQuery: malloyQuery })
-                        }
-                        submittedQuery={
-                           query?.malloyQuery
-                              ? {
-                                   executionState: mutation.isPending
-                                      ? "running"
-                                      : "finished",
-                                   response: {
-                                      result: query.malloyResult,
-                                   },
-                                   query: query.malloyQuery,
-                                   queryResolutionStartMillis: Date.now(),
-                                   onCancel: mutation.reset,
-                                }
-                              : undefined
-                        }
-                        options={{ showRawQuery: true }}
-                     />
-                  </div>
-               </div>
-            </MalloyExplorerProvider>
-         </StyledExplorerContent>
-      </StyledExplorerPage>
+                  />
+               </ResizableCollapsiblePanel>
+               <ResultPanel
+                  source={sourceAndPath.sourceInfo}
+                  draftQuery={query?.malloyQuery}
+                  setDraftQuery={(malloyQuery) =>
+                     setQuery({ ...query, malloyQuery: malloyQuery })
+                  }
+                  submittedQuery={
+                     query?.malloyQuery
+                        ? {
+                             executionState: mutation.isPending
+                                ? "running"
+                                : "finished",
+                             response: {
+                                result: query.malloyResult,
+                             },
+                             query: query.malloyQuery,
+                             queryResolutionStartMillis: Date.now(),
+                             onCancel: mutation.reset,
+                          }
+                        : undefined
+                  }
+                  options={{ showRawQuery: true }}
+               />
+            </div>
+         </MalloyExplorerProvider>
+      </StyledExplorerContent>
    );
 }
 
@@ -366,7 +353,6 @@ export function SourceExplorerComponent(props: SourceExplorerComponentProps) {
             <StyledExplorerContent>
                <div
                   style={{
-                     display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      height: "200px",

package/src/components/Model/index.ts

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

package/src/components/Model/useModelData.ts

@@ -0,0 +1,38 @@
+import { Configuration, ModelsApi, CompiledModel } from "../../client";
+import { usePackage } from "../Package/PackageProvider";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
+
+const modelsApi = new ModelsApi(new Configuration());
+
+/**
+ * Custom hook for fetching model data. Combines usePackage context with
+ * useQueryWithApiError to fetch a compiled model.
+ */
+export function useModelData(modelPath: string, versionId?: string) {
+   const {
+      projectName,
+      packageName,
+      versionId: packageVersionId,
+   } = usePackage();
+   const effectiveVersionId = versionId || packageVersionId;
+
+   return useQueryWithApiError<CompiledModel>({
+      queryKey: [
+         "package",
+         projectName,
+         packageName,
+         modelPath,
+         effectiveVersionId,
+      ],
+      queryFn: async (config) => {
+         const response = await modelsApi.getModel(
+            projectName,
+            packageName,
+            modelPath,
+            effectiveVersionId,
+            config,
+         );
+         return response.data;
+      },
+   });
+}

package/src/components/styles.ts

@@ -18,8 +18,6 @@ export const StyledCardMedia = styled(CardMedia)({
 });
 
 export const StyledExplorerPage = styled("div")({
-   display: "flex",
-   flexDirection: "column",
    height: "100%",
 });
 
@@ -32,7 +30,6 @@ export const StyledExplorerBanner = styled("div")({
 });
 
 export const StyledExplorerContent = styled("div")({
-   display: "flex",
    height: "75vh",
    width: "100%",
    overflowY: "auto",