@malloy-publisher/sdk 0.0.138 → 0.0.139

package/src/components/Notebook/Notebook.tsx

@@ -1,9 +1,25 @@
 import "@malloydata/malloy-explorer/styles.css";
-import { Stack, Typography } from "@mui/material";
-import { useEffect, useState } from "react";
+import * as Malloy from "@malloydata/malloy-interfaces";
+import { Box, Paper, Stack, Typography } from "@mui/material";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { RawNotebook } from "../../client";
+import { useDimensionalFilterRangeData } from "../../hooks/useDimensionalFilterRangeData";
+import {
+   FilterSelection,
+   useDimensionFilters,
+} from "../../hooks/useDimensionFilters";
 import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { DimensionFilter, RetrievalFunction } from "../filter/DimensionFilter";
+import {
+   extractDimensionSpecs,
+   extractSourceFromQuery,
+   generateFilterClause,
+   getJoinedSources,
+   injectWhereClause,
+   parseAllSourceInfos,
+   parseNotebookFilterAnnotation,
+} from "../filter/utils";
 
 import { parseResourceUri } from "../../utils/formatting";
 import { Loading } from "../Loading";
@@ -15,12 +31,15 @@ import { EnhancedNotebookCell } from "./types";
 interface NotebookProps {
    resourceUri: string;
    maxResultSize?: number;
+   /** Optional retrieval function for semantic search filters */
+   retrievalFn?: RetrievalFunction;
 }
 
 // Requires PackageProvider
 export default function Notebook({
    resourceUri,
    maxResultSize = 0,
+   retrievalFn,
 }: NotebookProps) {
    const { apiClients } = useServer();
    const {
@@ -56,11 +75,84 @@ export default function Notebook({
    const [isExecuting, setIsExecuting] = useState(false);
    const [executionError, setExecutionError] = useState<Error | null>(null);
 
-   // Execute cells sequentially when notebook is loaded
-   useEffect(() => {
-      if (!isSuccess || !notebook.notebookCells) return;
+   // Parse filter configuration from notebook annotations
+   const filterConfig = useMemo(() => {
+      if (!notebook) return null;
+      return parseNotebookFilterAnnotation(notebook.annotations);
+   }, [notebook]);
+
+   // Parse all SourceInfos from notebook cells and create a map
+   const sourceData = useMemo(() => {
+      if (!notebook?.notebookCells) return null;
+      return parseAllSourceInfos(notebook.notebookCells);
+   }, [notebook]);
+
+   const sourceInfoMap = useMemo(
+      () => sourceData?.sourceInfoMap ?? new Map<string, Malloy.SourceInfo>(),
+      [sourceData],
+   );
+   const modelPath = sourceData?.modelPath ?? null;
+
+   // Build dimension specs from filter config and source info map
+   // Each spec includes source and model for proper query routing
+   const dimensionSpecs = useMemo(() => {
+      if (!filterConfig || sourceInfoMap.size === 0 || !modelPath) return [];
+      return extractDimensionSpecs(
+         sourceInfoMap,
+         filterConfig.filters,
+         modelPath,
+      );
+   }, [filterConfig, sourceInfoMap, modelPath]);
+
+   // Initialize dimension filters hook
+   const { filterStates, updateFilter, getActiveFilters } = useDimensionFilters(
+      {
+         dimensionSpecs,
+      },
+   );
+
+   // Get active filters - include filterStates in deps to ensure updates when individual items change
+   const activeFilters = useMemo(
+      () => getActiveFilters(),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [filterStates, getActiveFilters],
+   );
+
+   // Create a map of dimension name -> source name for quick lookup
+   const dimensionToSourceMap = useMemo(() => {
+      const map = new Map<string, string>();
+      for (const spec of dimensionSpecs) {
+         map.set(spec.dimensionName, spec.source);
+      }
+      return map;
+   }, [dimensionSpecs]);
+
+   // Create a map of source name -> set of joined source names
+   const sourceJoinsMap = useMemo(() => {
+      const map = new Map<string, Set<string>>();
+      for (const [sourceName, sourceInfo] of sourceInfoMap) {
+         map.set(sourceName, getJoinedSources(sourceInfo));
+      }
+      return map;
+   }, [sourceInfoMap]);
+
+   // Fetch filter range data when we have dimension specs
+   // The hook now handles multiple source/model combos internally
+   const { data: filterValuesData } = useDimensionalFilterRangeData({
+      project: projectName,
+      package: packageName,
+      dimensionSpecs,
+      versionId,
+      enabled: dimensionSpecs.length > 0,
+      activeFilters,
+   });
+
+   // Unified cell execution function
+   // Executes all notebook cells, optionally applying filters to query cells
+   const executeCells = useCallback(
+      async (filtersToApply: FilterSelection[] = []) => {
+         if (!isSuccess || !notebook?.notebookCells) return;
 
-      const executeCells = async () => {
          setIsExecuting(true);
          setExecutionError(null);
          const cells: EnhancedNotebookCell[] = [];
@@ -80,32 +172,93 @@ export default function Notebook({
                }
 
                // Execute code cells
+               const cellText = rawCell.text || "";
+               const hasQuery =
+                  cellText.includes("run:") ||
+                  cellText.includes("->") ||
+                  /^\s*(run|query)\s*:/m.test(cellText);
+
                try {
-                  // Call the executeNotebookCell API
-                  const response = await fetch(
-                     `/api/v0/projects/${projectName}/packages/${packageName}/notebooks/${notebookPath}/cells/${i}${versionId ? `?versionId=${versionId}` : ""}`,
-                     {
-                        method: "GET",
-                        credentials: "include",
-                     },
-                  );
-
-                  if (!response.ok) {
-                     throw new Error(
-                        `Failed to execute cell ${i}: ${response.statusText}`,
+                  if (hasQuery && modelPath) {
+                     // Query cell - use models API with optional filters
+                     let queryToExecute = cellText;
+
+                     // Apply filters if any match this query's source
+                     if (filtersToApply.length > 0) {
+                        const querySourceName =
+                           extractSourceFromQuery(cellText);
+
+                        // Get the set of joined sources for this query's source
+                        const joinedSources =
+                           (querySourceName &&
+                              sourceJoinsMap.get(querySourceName)) ||
+                           new Set<string>();
+
+                        // Filter to only include those matching this query's source or joined sources
+                        const filtersForSource = querySourceName
+                           ? filtersToApply.filter((filter) => {
+                                const filterSourceName =
+                                   dimensionToSourceMap.get(
+                                      filter.dimensionName,
+                                   );
+                                if (!filterSourceName) return false;
+                                return (
+                                   filterSourceName === querySourceName ||
+                                   joinedSources.has(filterSourceName)
+                                );
+                             })
+                           : [];
+
+                        if (filtersForSource.length > 0) {
+                           const filterClause = generateFilterClause(
+                              filtersForSource,
+                              dimensionToSourceMap,
+                              querySourceName,
+                           );
+                           if (filterClause) {
+                              queryToExecute = injectWhereClause(
+                                 cellText,
+                                 filterClause,
+                              );
+                           }
+                        }
+                     }
+
+                     // Execute using models API
+                     const response = await apiClients.models.executeQueryModel(
+                        projectName,
+                        packageName,
+                        modelPath,
+                        {
+                           query: queryToExecute,
+                           versionId,
+                        },
                      );
-                  }
 
-                  const executedCell = await response.json();
+                     cells.push({
+                        type: rawCell.type,
+                        text: rawCell.text,
+                        result: response.data.result,
+                     });
+                  } else {
+                     // Non-query code cell - use notebook cell execution API
+                     const response =
+                        await apiClients.notebooks.executeNotebookCell(
+                           projectName,
+                           packageName,
+                           notebookPath,
+                           i,
+                           versionId,
+                        );
 
-                  // Combine raw cell with execution results
-                  cells.push({
-                     type: rawCell.type,
-                     text: rawCell.text,
-                     queryName: executedCell.queryName,
-                     result: executedCell.result,
-                     newSources: executedCell.newSources,
-                  });
+                     const executedCell = response.data;
+                     cells.push({
+                        type: rawCell.type,
+                        text: rawCell.text,
+                        result: executedCell.result,
+                        newSources: executedCell.newSources,
+                     });
+                  }
                } catch (cellError) {
                   // If a cell fails, add it without execution results
                   console.error(`Error executing cell ${i}:`, cellError);
@@ -123,15 +276,142 @@ export default function Notebook({
          } finally {
             setIsExecuting(false);
          }
-      };
+      },
+      [
+         isSuccess,
+         notebook,
+         modelPath,
+         dimensionToSourceMap,
+         sourceJoinsMap,
+         projectName,
+         packageName,
+         notebookPath,
+         versionId,
+         apiClients.models,
+         apiClients.notebooks,
+      ],
+   );
+
+   // Execute cells when notebook is loaded (no filters initially)
+   useEffect(() => {
+      if (!isSuccess || !notebook?.notebookCells) return;
+      executeCells([]);
+   }, [isSuccess, notebook, executeCells]);
+
+   // Re-execute when filters change
+   // Track previous activeFilters to detect actual changes (not just reference changes)
+   const prevActiveFiltersRef = useRef<string>("");
+
+   useEffect(() => {
+      // Serialize activeFilters to detect actual value changes
+      const serialized = JSON.stringify(
+         activeFilters.map((f) => ({
+            dim: f.dimensionName,
+            type: f.matchType,
+            val: f.value,
+            val2: f.value2,
+         })),
+      );
+
+      // Skip if no actual change or if this is the initial empty state
+      if (serialized === prevActiveFiltersRef.current) {
+         return;
+      }
+
+      // Skip the initial render (when prevActiveFiltersRef is empty and filters are also empty)
+      if (prevActiveFiltersRef.current === "" && activeFilters.length === 0) {
+         prevActiveFiltersRef.current = serialized;
+         return;
+      }
 
-      executeCells();
-   }, [isSuccess, notebook, projectName, packageName, notebookPath, versionId]);
+      prevActiveFiltersRef.current = serialized;
+
+      // Re-execute with current filters (or no filters if cleared)
+      if (!isExecuting) {
+         executeCells(activeFilters);
+      }
+   }, [activeFilters, isExecuting, executeCells]);
+
+   // Handle filter change
+   const handleFilterChange = useCallback(
+      (dimensionName: string) => (selection: FilterSelection | null) => {
+         updateFilter(dimensionName, selection);
+      },
+      [updateFilter],
+   );
+
+   // Check if retrieval is supported
+   const hasRetrievalFilters = dimensionSpecs.some(
+      (spec) => spec.filterType === "Retrieval",
+   );
+   const _retrievalSupported = !hasRetrievalFilters || !!retrievalFn;
 
    return (
       <CleanNotebookContainer>
          <CleanNotebookSection>
             <Stack spacing={3} component="section">
+               {/* Filter Panel */}
+               {dimensionSpecs.length > 0 && filterValuesData && (
+                  <Paper
+                     elevation={0}
+                     sx={{
+                        p: 3,
+                        backgroundColor: "#f8f9fa",
+                        border: "1px solid #e0e0e0",
+                        borderRadius: 2,
+                     }}
+                  >
+                     <Typography
+                        variant="subtitle2"
+                        sx={{
+                           fontWeight: 600,
+                           mb: 2,
+                           color: "#333",
+                        }}
+                     >
+                        Filters
+                     </Typography>
+                     <Box
+                        sx={{
+                           display: "grid",
+                           gridTemplateColumns:
+                              "repeat(auto-fill, minmax(250px, 1fr))",
+                           gap: 3,
+                        }}
+                     >
+                        {dimensionSpecs.map((spec) => {
+                           const values =
+                              filterValuesData.get(spec.dimensionName) || [];
+                           const filterState = filterStates.get(
+                              spec.dimensionName,
+                           );
+                           // Skip Retrieval filters if no retrievalFn provided
+                           if (
+                              spec.filterType === "Retrieval" &&
+                              !retrievalFn
+                           ) {
+                              return null;
+                           }
+
+                           return (
+                              <Box key={spec.dimensionName}>
+                                 <DimensionFilter
+                                    spec={spec}
+                                    values={values}
+                                    selection={filterState?.selection}
+                                    onChange={handleFilterChange(
+                                       spec.dimensionName,
+                                    )}
+                                    retrievalFn={retrievalFn}
+                                 />
+                              </Box>
+                           );
+                        })}
+                     </Box>
+                  </Paper>
+               )}
+
+               {/* Loading State */}
                {(!isSuccess || isExecuting) && !isError && (
                   <Loading
                      text={
@@ -141,6 +421,8 @@ export default function Notebook({
                      }
                   />
                )}
+
+               {/* Notebook Cells */}
                {isSuccess &&
                   !isExecuting &&
                   enhancedCells.map((cell, index) => (
@@ -152,6 +434,8 @@ export default function Notebook({
                         maxResultSize={maxResultSize}
                      />
                   ))}
+
+               {/* Error States */}
                {isError && error.status === 404 && (
                   <Typography variant="body2" sx={{ color: "#666666" }}>
                      <code>{`${projectName} > ${packageName} > ${notebookPath}`}</code>{" "}

package/src/components/RenderedResult/RenderedResult.tsx

@@ -1,9 +1,9 @@
 import React, {
+   Suspense,
    useEffect,
+   useLayoutEffect,
    useRef,
    useState,
-   useLayoutEffect,
-   Suspense,
 } from "react";
 
 type MalloyRenderElement = HTMLElement & Record<string, unknown>;
@@ -45,6 +45,21 @@ const createRenderer = async (onDrill?: (element: unknown) => void) => {
    return renderer.createViz();
 };
 
+function RenderResultSimple({ result, onDrill }: RenderedResultProps) {
+   const ref = useRef<HTMLDivElement>(null);
+
+   useLayoutEffect(() => {
+      if (!ref.current || !result) return;
+      const element = ref.current;
+
+      createRenderer(onDrill).then((viz) => {
+         viz.setResult(JSON.parse(result));
+         viz.render(element);
+      });
+   }, [result, onDrill]);
+
+   return <div ref={ref} style={{ width: "100%", height: "100%" }} />;
+}
 // Inner component that actually renders the visualization
 function RenderedResultInner({
    result,
@@ -219,7 +234,11 @@ export default function RenderedResult(props: RenderedResultProps) {
             </div>
          }
       >
-         <RenderedResultInner {...props} />
+         {props.onSizeChange ? (
+            <RenderedResultInner {...props} />
+         ) : (
+            <RenderResultSimple {...props} />
+         )}
       </Suspense>
    );
 }