@malloy-publisher/sdk 0.0.88 → 0.0.89

package/package.json

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

package/src/components/Workbook/MutableCell.tsx

@@ -58,6 +58,7 @@ export function MutableCell({
    onDelete,
    addButtonCallback,
 }: NotebookCellProps) {
+   const [value, setValue] = useState(cell.value);
    const [codeExpanded, setCodeExpanded] =
       React.useState<boolean>(expandCodeCell);
    const [embeddingExpanded, setEmbeddingExpanded] =
@@ -83,13 +84,9 @@ export function MutableCell({
             setHighlightedMalloyCode(code);
          });
    }, [cell]);
-   const [value, setValue] = useState(cell.value);
    React.useEffect(() => {
       document.documentElement.setAttribute("data-color-mode", "light");
    });
-   const updateMarkdown = useDebounce((newValue: string) => {
-      onCellChange({ ...cell, value: newValue });
-   });
    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
    const handleDeleteConfirm = () => {
@@ -98,7 +95,7 @@ export function MutableCell({
    };
    const noSources = sourceAndPaths.length === 0;
 
-   const saveResult = () => {
+   const saveResult = React.useCallback(() => {
       // Get the current modelPath and sourceName from the selected source
       const currentSource = sourceAndPaths[selectedSourceIndex];
       const modelPath = currentSource?.modelPath || cell.modelPath || "";
@@ -109,7 +106,7 @@ export function MutableCell({
       // the stringified JSON objects that are stored in the cell.
       onCellChange({
          ...cell,
-         value: query.query,
+         value: cell.isMarkdown ? value : query.query,
          result: query.malloyResult
             ? JSON.stringify(query.malloyResult)
             : undefined,
@@ -119,7 +116,7 @@ export function MutableCell({
          sourceName,
          modelPath,
       });
-   };
+   }, [cell, value, query, onCellChange, selectedSourceIndex, sourceAndPaths]);
 
    const deleteButton = (
       <Tooltip title="Delete Cell">
@@ -160,11 +157,15 @@ export function MutableCell({
          </DialogActions>
       </Dialog>
    );
+   const saveAndClose = () => {
+      saveResult();
+      onClose();
+   };
    const buttons = cell.isMarkdown ? (
       <>
          {editingMarkdown ? (
             <Tooltip title="Save">
-               <IconButton size="small" onClick={onClose}>
+               <IconButton size="small" onClick={saveAndClose}>
                   <CheckIcon />
                </IconButton>
             </Tooltip>
@@ -207,13 +208,7 @@ export function MutableCell({
          )}
          {editingMalloy && (
             <Tooltip title="Save">
-               <IconButton
-                  size="small"
-                  onClick={() => {
-                     saveResult();
-                     onClose();
-                  }}
-               >
+               <IconButton size="small" onClick={saveAndClose}>
                   <CheckIcon />
                </IconButton>
             </Tooltip>
@@ -230,22 +225,15 @@ export function MutableCell({
    );
 
    const isEditing = editingMalloy || editingMarkdown;
-
    const editingButtons = editingMarkdown ? (
       <Tooltip title="Save">
-         <IconButton size="small" onClick={onClose}>
+         <IconButton size="small" onClick={saveAndClose}>
             <CheckIcon />
          </IconButton>
       </Tooltip>
    ) : editingMalloy ? (
       <Tooltip title="Save">
-         <IconButton
-            size="small"
-            onClick={() => {
-               saveResult();
-               onClose();
-            }}
-         >
+         <IconButton size="small" onClick={saveAndClose}>
             <CheckIcon />
          </IconButton>
       </Tooltip>
@@ -305,12 +293,12 @@ export function MutableCell({
                      autoFocus
                      onChange={(newValue) => {
                         setValue(newValue);
-                        updateMarkdown(newValue);
+                        onCellChange({ ...cell, value: newValue });
                      }}
                      onBlur={() => {
                         saveResult();
                         if (!isHovered) {
-                           onClose();
+                           saveAndClose();
                         }
                      }}
                   />
@@ -331,9 +319,9 @@ export function MutableCell({
                         "& blockquote": { mt: 0.5, mb: 0.5 },
                      }}
                   >
-                     {value ? (
+                     {cell.value ? (
                         <Box onClick={onEdit} sx={{ cursor: "pointer" }}>
-                           <Markdown>{value}</Markdown>
+                           <Markdown>{cell.value}</Markdown>
                         </Box>
                      ) : (
                         <Box onClick={onEdit} sx={{ cursor: "pointer" }}>
@@ -469,22 +457,3 @@ export function MutableCell({
       </StyledCard>
    );
 }
-
-function useDebounce<T>(callback: (value: T) => void, delay: number = 2000) {
-   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(
-      undefined,
-   );
-
-   return React.useCallback(
-      (value: T) => {
-         if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-         }
-
-         timeoutRef.current = setTimeout(() => {
-            callback(value);
-         }, delay);
-      },
-      [callback, delay],
-   );
-}

package/src/components/Workbook/Workbook.tsx

@@ -58,6 +58,7 @@ export default function Workbook({
    const navigate = useRouterClickHandler();
    const { server, getAccessToken } = useServer();
    const { workbookStorage } = useWorkbookStorage();
+   const [success, setSuccess] = React.useState<string | undefined>(undefined);
    const [lastError, setLastError] = React.useState<string | undefined>(
       undefined,
    );
@@ -88,17 +89,20 @@ export default function Workbook({
       setMenuIndex(null);
    };
    const handleAddCell = (isMarkdown: boolean, index: number) => {
-      workbookData.insertCell(index, {
-         isMarkdown,
-         value: "",
-      });
-      saveWorkbook();
+      if (!workbookData) return;
+      setWorkbookData(
+         workbookData.insertCell(index, {
+            isMarkdown,
+            value: "",
+         }),
+      );
       if (isMarkdown) {
          setEditingMarkdownIndex(index);
       } else {
          setEditingMalloyIndex(index);
       }
       handleMenuClose();
+      console.log("handleAddCell", isMarkdown, index);
    };
 
    const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
@@ -112,9 +116,11 @@ export default function Workbook({
             .deleteWorkbook(workbookPath)
             .then(() => {
                setLastError(undefined);
+               setSuccess(undefined);
             })
             .catch((error) => {
                setLastError(`Error deleting workbook: ${error.message}`);
+               setSuccess(undefined);
             });
       }
       setDeleteDialogOpen(false);
@@ -127,11 +133,17 @@ export default function Workbook({
    };
 
    const saveWorkbook = React.useCallback(async () => {
+      if (!workbookData) {
+         console.log("No workbook data ref");
+         return;
+      }
       try {
          setWorkbookData(await workbookData.saveWorkbook());
          setLastError(undefined);
+         setSuccess("Workbook saved");
       } catch (error) {
          setLastError(`Error saving workbook: ${error.message}`);
+         setSuccess(undefined);
       }
    }, [workbookData]);
    React.useEffect(() => {
@@ -265,13 +277,21 @@ export default function Workbook({
    return (
       <StyledCard variant="outlined">
          <StyledCardContent>
-            {lastError && (
-               <Box sx={{ mb: 2 }}>
-                  <Typography color="error" variant="body2">
-                     {lastError}
-                  </Typography>
+            <Box sx={{ mb: 2 }}>
+               <Box sx={{ minHeight: "24px" }}>
+                  {lastError ? (
+                     <Typography color="error" variant="body2">
+                        {lastError}
+                     </Typography>
+                  ) : success ? (
+                     <Typography color="success" variant="body2">
+                        {success}
+                     </Typography>
+                  ) : (
+                     <span>&nbsp;</span>
+                  )}
                </Box>
-            )}
+            </Box>
             <Stack
                sx={{
                   flexDirection: "row",
@@ -350,7 +370,7 @@ export default function Workbook({
                               Cancel
                            </Button>
                            <Button
-                              onClick={(event) => handleDeleteConfirm(event)}
+                              onClick={handleDeleteConfirm}
                               color="error"
                               autoFocus
                               size="small"
@@ -427,7 +447,6 @@ export default function Workbook({
                         }}
                         onCellChange={(cell) => {
                            setWorkbookData(workbookData.setCell(index, cell));
-                           saveWorkbook();
                         }}
                         onEdit={() => {
                            if (cell.isMarkdown) {
@@ -442,6 +461,7 @@ export default function Workbook({
                            } else {
                               setEditingMalloyIndex(undefined);
                            }
+                           saveWorkbook();
                         }}
                      />
                   </React.Fragment>