@malloy-publisher/sdk 0.0.81 → 0.0.83

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",