Update sheet on data

Author: ajhai

llmstack/client/src/components/sheets/Sheet.jsx

@@ -104,16 +104,24 @@ function Sheet(props) {
   }/ws`;
 
   const getCellContent = useCallback(
-    ([row, column]) => {
-      const cell = cells[row]?.[column];
+    ([column, row]) => {
+      // Find the column in cells
+      const col = columns[column].col;
+      const cell = cells[row]?.[col];
+
       return {
-        kind: cell?.kind || GridCellKind.Text,
+        kind:
+          (cell?.kind === "app_run" ? GridCellKind.Text : cell?.kind) ||
+          columns[column].kind,
         displayData: cell?.displayData || cell?.data || "",
         data: cell?.data || "",
         allowOverlay: true,
+        allowWrapping: true,
+        skeletonWidth: 80,
+        skeletonWidthVariability: 25,
       };
     },
-    [cells],
+    [cells, columns],
   );
 
   const parseSheetColumnsIntoGridColumns = (columns) => {
@@ -129,6 +137,7 @@ function Sheet(props) {
         data: column.data,
         hasMenu: true,
         icon: GridColumnIcon.HeaderString,
+        width: column.width || 200,
       };
     });
   };
@@ -194,26 +203,53 @@ function Sheet(props) {
           if (event.type === "cell.update") {
             const cell = event.cell;
             const [row, col] = cell.id.split("-");
+            const column = columns.find((c) => c.col === col);
 
             setCells((cells) => ({
               ...cells,
               [row]: {
                 ...cells[row],
                 [col]: {
                   ...cells[row]?.[col],
-                  ...cell,
+                  ...{
+                    kind: column?.kind || GridCellKind.Text,
+                    data: cell.data,
+                    displayData: cell.data,
+                  },
                 },
               },
             }));
 
-            sheetRef.current?.updateCells([{ cell: [row, col] }]);
+            sheetRef.current?.updateCells([
+              { cell: [columns.findIndex((c) => c.col === col), row] },
+            ]);
+          } else if (event.type === "cell.updating") {
+            const cell = event.cell;
+            const [row, col] = cell.id.split("-");
+
+            setCells((cells) => ({
+              ...cells,
+              [row]: {
+                ...cells[row],
+                [col]: {
+                  ...cells[row]?.[col],
+                  ...{
+                    kind: GridCellKind.Loading,
+                  },
+                },
+              },
+            }));
+
+            sheetRef.current?.updateCells([
+              { cell: [columns.findIndex((c) => c.col === col), row] },
+            ]);
           }
         });
 
         ws.send(JSON.stringify({ event: "run" }));
       }
     }
-  }, [runId, sheet?.uuid, wsUrlPrefix]);
+  }, [runId, sheet?.uuid, wsUrlPrefix, columns]);
 
   return sheet ? (
     <Stack>
@@ -261,11 +297,13 @@ function Sheet(props) {
           onCellEdited={(cell, value) => {
             setCells((cells) => ({
               ...cells,
-              [cell[0]]: {
-                ...cells[cell[0]],
-                [cell[1]]: {
-                  ...(cells[cell[0]]?.[cell[1]] || {}),
+              [cell[1]]: {
+                ...cells[cell[1]],
+                [cell[0]]: {
+                  ...(cells[cell[1]]?.[cell[0]] || {}),
                   ...value,
+                  kind: columns[cell[0]].kind,
+                  data: value.data,
                   displayData: value.displayData || value.data,
                 },
               },
@@ -279,6 +317,16 @@ function Sheet(props) {
             };
             setShowEditColumnMenu(true);
           }}
+          onColumnResize={(column, width) => {
+            setColumns((columns) => {
+              const newColumns = [...columns];
+              const columnIndex = newColumns.findIndex(
+                (c) => c.col === column.col,
+              );
+              newColumns[columnIndex].width = width;
+              return newColumns;
+            });
+          }}
           rows={numRows}
         />
       </Box>

llmstack/client/src/components/sheets/SheetColumnMenu.jsx

@@ -21,22 +21,13 @@ import ThemedJsonForm from "../ThemedJsonForm";
 import TextFieldWithVars from "../apps/TextFieldWithVars";
 import "@glideapps/glide-data-grid/dist/index.css";
 
-export const columnTypeToDatagridMapping = {
-  text: {
-    kind: GridCellKind.Text,
-  },
-  number: {
-    kind: GridCellKind.Number,
-  },
-  image: {
-    kind: GridCellKind.Image,
-  },
-  file: {
-    kind: GridCellKind.Image,
-  },
-  app_run: {
-    kind: GridCellKind.Custom,
-  },
+const numberToLetters = (num) => {
+  let letters = "";
+  while (num >= 0) {
+    letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"[num % 26] + letters;
+    num = Math.floor(num / 26) - 1;
+  }
+  return letters;
 };
 
 // Allow the user to pick an app, and then show the form for that app input
@@ -54,9 +45,9 @@ const AppRunForm = ({ columns, data, setData }) => {
         {...props}
         introText={"Available columns"}
         schemas={columns.map((c, index) => ({
-          id: `${index}`,
-          pillPrefix: `${index}:${c.title}`,
-          label: `${index}: ${c.title}`,
+          id: `${numberToLetters(index)}`,
+          pillPrefix: `${numberToLetters(index)}:${c.title}`,
+          label: `${numberToLetters(index)}: ${c.title}`,
         }))}
       />
     );
@@ -147,12 +138,7 @@ export function SheetColumnMenu({
   const columnAppRunData = useRef(column?.data || {});
 
   useEffect(() => {
-    if (column?.kind === GridCellKind.Custom) {
-      setColumnType(column?.data?.kind || GridCellKind.Text);
-    } else {
-      setColumnType(column?.kind || GridCellKind.Text);
-    }
-
+    setColumnType(column?.kind || GridCellKind.Text);
     setColumnName(column?.title || "");
     columnAppRunData.current = column?.data || {};
   }, [column]);
@@ -161,10 +147,10 @@ export function SheetColumnMenu({
     const newColumn = {
       col: columns.length,
       title: columnName || "New Column",
-      kind: columnTypeToDatagridMapping[columnType].kind,
+      kind: columnType,
       data:
         columnType === "app_run" && columnAppRunData.current
-          ? { ...columnAppRunData.current, kind: columnType }
+          ? columnAppRunData.current
           : {},
     };