Animate running cell

quadratic-client/src/app/ai/hooks/useAITransactions.tsx

@@ -54,6 +54,8 @@ const OperationToChatMessage: OperationMessageMap<TrackedOperation> = {
   RowsMoved: (operation) =>
     `- moved rows ${operation.from_range[0]}-${operation.from_range[1]} to ${operation.to} in sheet ${operation.sheet_name}`,
   ComputeCode: (operation) => `- computed code at ${operation.selection}`,
+  MoveDataTable: (operation) => `- moved data table from ${operation.from} to ${operation.to}`,
+  SwitchDataTableKind: (operation) => `- switched data table at ${operation.selection} to ${operation.kind}`,
 };
 
 const convertTransactionToChatMessage = (transaction: TrackedTransaction): string => {

quadratic-client/src/app/ai/utils/aiToMarkdown.ts

@@ -28,11 +28,7 @@ const convertJsCellValue = (cell: JsCellValueCode, showLanguage: boolean): strin
     return `"This cell contains an error"`;
   } else if (cell.kind === 'Html') {
     return `"This cell contains html"`;
-  } else if (cell.kind === 'Code') {
-    return `"This cell contains code"`;
   } else if (cell.kind === 'Image') {
-    return `"This cell contains an image"`;
-  } else if (cell.kind === 'Import') {
     return `"This cell contains an import"`;
   } else {
     if (cell.kind !== 'Blank') {

quadratic-client/src/app/gridGL/cells/tables/Table.ts

@@ -13,8 +13,8 @@ import type { Point } from 'pixi.js';
 import { Container, Rectangle } from 'pixi.js';
 
 export class Table extends Container {
-  private outline: TableOutline;
   public active = false;
+  outline: TableOutline;
 
   // Header is either a child of Table or, when it is sticky, a child of
   // pixiApp.overHeadings.

quadratic-client/src/app/gridGL/cells/tables/TableOutline.ts

@@ -3,6 +3,7 @@
 import { events } from '@/app/events/events';
 import type { Table } from '@/app/gridGL/cells/tables/Table';
 import { generatedTextures } from '@/app/gridGL/generateTextures';
+import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
 import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { getCSSVariableTint } from '@/app/helpers/convertColor';
 import { colors } from '@/app/theme/colors';
@@ -12,9 +13,13 @@ import { Graphics, Rectangle } from 'pixi.js';
 const SPILL_HIGHLIGHT_THICKNESS = 1;
 const SPILL_FILL_ALPHA = 0.05;
 
+const RUNNING_ALPHA_TIME = 250;
+
 export class TableOutline extends Graphics {
   private table: Table;
 
+  running: boolean | 'awaiting' = false;
+
   constructor(table: Table) {
     super();
     this.table = table;
@@ -29,9 +34,22 @@ export class TableOutline extends Graphics {
     super.destroy();
   };
 
-  update = () => {
+  update = (runningCount?: number) => {
     this.clear();
 
+    if (this.running && runningCount) {
+      const running = runningCount % RUNNING_ALPHA_TIME;
+      let change = 0;
+      if (running < RUNNING_ALPHA_TIME / 2) {
+        change = running / (RUNNING_ALPHA_TIME / 2);
+      } else {
+        change = 1 - (running - RUNNING_ALPHA_TIME / 2) / (RUNNING_ALPHA_TIME / 2);
+      }
+      this.beginFill(getCSSVariableTint('background'), 0.75 * change);
+      this.drawRect(0, 0, this.table.tableBounds.width, this.table.tableBounds.height);
+      this.endFill();
+    }
+
     if (!pixiAppSettings.showCellTypeOutlines) return;
 
     // draw the table selected outline
@@ -75,6 +93,8 @@ export class TableOutline extends Graphics {
         this.drawDashedRectangle(rectangle, colors.cellColorError);
       });
     }
+
+    pixiApp.setViewportDirty();
   };
 
   // draw a dashed and filled rectangle to identify the cause of the spill error

quadratic-client/src/app/gridGL/cells/tables/Tables.ts

@@ -15,6 +15,8 @@ import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
 import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import type { JsCoordinate, JsHtmlOutput, JsRenderCodeCell, JsUpdateCodeCell } from '@/app/quadratic-core-types';
 import { fromUint8Array } from '@/app/shared/utils/Uint8Array';
+import type { CodeRun } from '@/app/web-workers/CodeRun';
+import type { LanguageState } from '@/app/web-workers/languageTypes';
 import type { CoreClientImage } from '@/app/web-workers/quadraticCore/coreClientMessages';
 import { Container, type Point, type Rectangle } from 'pixi.js';
 
@@ -55,6 +57,9 @@ export class Tables extends Container<Table> {
 
   tableCursor: string | undefined;
 
+  private runningState: string[] = [];
+  private runningCount = 0;
+
   constructor(cellsSheet: CellsSheet) {
     super();
     this.cellsSheet = cellsSheet;
@@ -74,6 +79,10 @@ export class Tables extends Container<Table> {
     events.on('htmlOutput', this.htmlOutput);
     events.on('htmlUpdate', this.htmlUpdate);
     events.on('updateImage', this.updateImage);
+
+    events.on('pythonState', this.updateRunningState);
+    events.on('javascriptState', this.updateRunningState);
+    events.on('connectionState', this.updateRunningState);
   }
 
   destroy() {
@@ -90,6 +99,10 @@ export class Tables extends Container<Table> {
     events.off('htmlUpdate', this.htmlUpdate);
     events.off('updateImage', this.updateImage);
 
+    events.off('pythonState', this.updateRunningState);
+    events.off('javascriptState', this.updateRunningState);
+    events.off('connectionState', this.updateRunningState);
+
     super.destroy();
   }
 
@@ -286,6 +299,14 @@ export class Tables extends Container<Table> {
       const visibleTables = this.getVisibleTables();
       visibleTables?.forEach((table) => table.update(bounds, gridHeading));
     }
+    if (this.runningState.length !== 0) {
+      this.runningCount++;
+      for (const tablePos of this.runningState) {
+        const [x, y] = tablePos.split(',');
+        const table = this.getTable(Number(x), Number(y));
+        table?.outline.update(this.runningCount);
+      }
+    }
   };
 
   private handleA1ContextUpdated = () => {
@@ -645,4 +666,52 @@ export class Tables extends Container<Table> {
   };
 
   //#endregion
+
+  private updateRunningState = (_state: LanguageState, current?: CodeRun, awaitingExecution?: CodeRun[]) => {
+    if (!current && !awaitingExecution) {
+      for (const tablePos of this.runningState) {
+        const [x, y] = tablePos.split(',');
+        const table = this.getTable(Number(x), Number(y));
+        if (table) {
+          table.outline.running = false;
+          table.outline.update();
+        }
+      }
+    }
+    const newTables: { table: Table; running: true | 'awaiting' }[] = [];
+    if (current && current.sheetPos.sheetId === this.cellsSheet.sheetId) {
+      const table = this.getTable(current.sheetPos.x, current.sheetPos.y);
+      if (table) {
+        newTables.push({ table, running: true });
+      }
+    }
+    if (awaitingExecution) {
+      for (const cell of awaitingExecution) {
+        if (cell.sheetPos.sheetId === this.cellsSheet.sheetId) {
+          const table = this.getTable(cell.sheetPos.x, cell.sheetPos.y);
+          if (table) {
+            newTables.push({ table, running: 'awaiting' });
+          }
+        }
+      }
+    }
+
+    for (const tablePos of this.runningState) {
+      const [x, y] = tablePos.split(',');
+      const table = this.getTable(Number(x), Number(y));
+      if (table && !newTables.find((t) => t.table === table)) {
+        table.outline.running = false;
+        table.outline.update();
+      }
+    }
+    const newRunningState: string[] = [];
+    for (const table of newTables) {
+      if (!this.runningState.includes(`${table.table.codeCell.x},${table.table.codeCell.y}`)) {
+        table.table.outline.running = table.running;
+        table.table.outline.update();
+        newRunningState.push(`${table.table.codeCell.x},${table.table.codeCell.y}`);
+      }
+    }
+    this.runningState = newRunningState;
+  };
 }

quadratic-client/src/app/quadratic-core-types/index.d.ts

@@ -74,7 +74,7 @@ export type JsCellsA1Values = { cells: Array<JsCellsA1Value>, x: number, y: numb
 export type JsCellValue = { value: string, kind: JsCellValueKind, };
 export type JsCellValueCode = { value: string, kind: JsCellValueKind, language: CodeCellLanguage | null, };
 export type JsCellValueSummary = { total_range: string, start_range: string | null, end_range: string | null, start_values: Array<Array<JsCellValueCode>> | null, end_values: Array<Array<JsCellValueCode>> | null, };
-export type JsCellValueKind = "Blank" | "Text" | "Number" | "Logical" | "DateTime" | "Date" | "Time" | "Duration" | "Error" | "Html" | "Code" | "Image" | "Import";
+export type JsCellValueKind = "Blank" | "Text" | "Number" | "Logical" | "DateTime" | "Date" | "Time" | "Duration" | "Error" | "Html" | "Image";
 export type JsCellValuePos = { value: string, kind: JsCellValueKind, pos: string, };
 export type JsCellValueRanges = { total_range: string, range: string, values: Array<Array<JsCellValueCode>> | null, };
 export type JsCellValueResult = [string, number];
@@ -183,7 +183,7 @@ end: number, };
 export type TableRef = { table_name: string, data: boolean, headers: boolean, totals: boolean, col_range: ColRange, };
 export type TextCase = { "CaseInsensitive": Array<string> } | { "CaseSensitive": Array<string> };
 export type TextMatch = { "Exactly": TextCase } | { "Contains": TextCase } | { "NotContains": TextCase } | { "TextLength": { min: number | null, max: number | null, } };
-export type TrackedOperation = { "type": "SetCellValues", selection: string, } | { "type": "SetDataTable", selection: string, name: string | null, deleted: boolean, } | { "type": "DeleteDataTable", selection: string, } | { "type": "FlattenDataTable", selection: string, } | { "type": "GridToDataTable", selection: string, } | { "type": "DataTableColumnsChanged", selection: string, } | { "type": "DataTableRowsChanged", selection: string, } | { "type": "DataTableSorted", selection: string, } | { "type": "DataTableHeaderToggled", selection: string, first_row_is_header: boolean, } | { "type": "FormatsChanged", sheet_name: string, selection: string, } | { "type": "AddSheet", sheet_name: string, } | { "type": "DeleteSheet", sheet_name: string, } | { "type": "DuplicateSheet", sheet_name: string, duplicated_sheet_name: string, } | { "type": "SetSheetName", old_sheet_name: string, new_sheet_name: string, } | { "type": "SetSheetColor", sheet_name: string, color: string | null, } | { "type": "ReorderSheet", sheet_name: string, order: string, } | { "type": "ReplaceSheet", sheet_name: string, } | { "type": "ResizeColumn", sheet_name: string, column: bigint, new_size: number, } | { "type": "ResizeRow", sheet_name: string, row: bigint, new_size: number, } | { "type": "ColumnsResized", sheet_name: string, count: number, } | { "type": "RowsResized", sheet_name: string, count: number, } | { "type": "DefaultRowSize", sheet_name: string, size: number, } | { "type": "DefaultColumnSize", sheet_name: string, size: number, } | { "type": "CursorChanged", selection: string, } | { "type": "MoveCells", from: string, to: string, columns: boolean, rows: boolean, } | { "type": "ValidationSet", selection: string, } | { "type": "ValidationRemoved", sheet_name: string, validation_id: string, } | { "type": "ValidationRemovedSelection", sheet_name: string, selection: string, } | { "type": "ColumnInserted", sheet_name: string, column: bigint, } | { "type": "ColumnDeleted", sheet_name: string, column: bigint, } | { "type": "RowInserted", sheet_name: string, row: bigint, } | { "type": "RowDeleted", sheet_name: string, row: bigint, } | { "type": "ColumnsDeleted", sheet_name: string, columns: Array<bigint>, } | { "type": "RowsDeleted", sheet_name: string, rows: Array<bigint>, } | { "type": "ColumnsMoved", sheet_name: string, from_range: [bigint, bigint], to: bigint, } | { "type": "RowsMoved", sheet_name: string, from_range: [bigint, bigint], to: bigint, } | { "type": "ComputeCode", selection: string, };
+export type TrackedOperation = { "type": "SetCellValues", selection: string, } | { "type": "SetDataTable", selection: string, name: string | null, deleted: boolean, } | { "type": "DeleteDataTable", selection: string, } | { "type": "FlattenDataTable", selection: string, } | { "type": "GridToDataTable", selection: string, } | { "type": "MoveDataTable", from: string, to: string, } | { "type": "SwitchDataTableKind", selection: string, kind: string, } | { "type": "DataTableColumnsChanged", selection: string, } | { "type": "DataTableRowsChanged", selection: string, } | { "type": "DataTableSorted", selection: string, } | { "type": "DataTableHeaderToggled", selection: string, first_row_is_header: boolean, } | { "type": "FormatsChanged", sheet_name: string, selection: string, } | { "type": "AddSheet", sheet_name: string, } | { "type": "DeleteSheet", sheet_name: string, } | { "type": "DuplicateSheet", sheet_name: string, duplicated_sheet_name: string, } | { "type": "SetSheetName", old_sheet_name: string, new_sheet_name: string, } | { "type": "SetSheetColor", sheet_name: string, color: string | null, } | { "type": "ReorderSheet", sheet_name: string, order: string, } | { "type": "ReplaceSheet", sheet_name: string, } | { "type": "ResizeColumn", sheet_name: string, column: bigint, new_size: number, } | { "type": "ResizeRow", sheet_name: string, row: bigint, new_size: number, } | { "type": "ColumnsResized", sheet_name: string, count: number, } | { "type": "RowsResized", sheet_name: string, count: number, } | { "type": "DefaultRowSize", sheet_name: string, size: number, } | { "type": "DefaultColumnSize", sheet_name: string, size: number, } | { "type": "CursorChanged", selection: string, } | { "type": "MoveCells", from: string, to: string, columns: boolean, rows: boolean, } | { "type": "ValidationSet", selection: string, } | { "type": "ValidationRemoved", sheet_name: string, validation_id: string, } | { "type": "ValidationRemovedSelection", sheet_name: string, selection: string, } | { "type": "ColumnInserted", sheet_name: string, column: bigint, } | { "type": "ColumnDeleted", sheet_name: string, column: bigint, } | { "type": "RowInserted", sheet_name: string, row: bigint, } | { "type": "RowDeleted", sheet_name: string, row: bigint, } | { "type": "ColumnsDeleted", sheet_name: string, columns: Array<bigint>, } | { "type": "RowsDeleted", sheet_name: string, rows: Array<bigint>, } | { "type": "ColumnsMoved", sheet_name: string, from_range: [bigint, bigint], to: bigint, } | { "type": "RowsMoved", sheet_name: string, from_range: [bigint, bigint], to: bigint, } | { "type": "ComputeCode", selection: string, };
 export type TrackedTransaction = { source: TransactionSource, transaction_name: TransactionName, operations: Array<TrackedOperation>, time_stamp: bigint, };
 export type TransactionName = "Unknown" | "ResizeColumn" | "ResizeRow" | "ResizeRows" | "ResizeColumns" | "Autocomplete" | "SetBorders" | "SetCells" | "SetFormats" | "SetDataTableAt" | "CutClipboard" | "PasteClipboard" | "SetCode" | "RunCode" | "FlattenDataTable" | "SwitchDataTableKind" | "GridToDataTable" | "DataTableMeta" | "DataTableMutations" | "DataTableFirstRowAsHeader" | "DataTableAddDataTable" | "Import" | "SetSheetMetadata" | "SheetAdd" | "SheetDelete" | "DuplicateSheet" | "ReplaceSheet" | "MoveCells" | "Validation" | "ManipulateColumnRow";
 export type TransactionSource = "Unset" | "User" | "Undo" | "Redo" | "Multiplayer" | "Server" | "Unsaved" | "AI" | "UndoAI" | "RedoAI";

quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascriptOutput.test.ts

@@ -57,13 +57,13 @@ describe('javascriptConvertOutputType', () => {
 
     expect(javascriptConvertOutputType(message, [], 0, 0)).toEqual({
       displayType: 'empty array',
-      output: ['', CellValueType.Code],
+      output: ['', CellValueType.Blank],
     });
     expect(message.length).toBe(0);
 
     expect(javascriptConvertOutputType(message, [[], [], []], 0, 0)).toEqual({
       displayType: 'empty array',
-      output: ['', CellValueType.Code],
+      output: ['', CellValueType.Blank],
     });
     expect(message.length).toBe(0);
   });

quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascriptOutput.ts

@@ -57,7 +57,7 @@ export function javascriptConvertOutputType(
     return { output: [value ? 'true' : 'false', CellValueType.Logical], displayType: 'boolean' };
   } else if (Array.isArray(value)) {
     // this handles the case where the value.flat() is empty
-    return { output: ['', CellValueType.Code], displayType: 'empty array' };
+    return { output: ['', CellValueType.Blank], displayType: 'empty array' };
   } else {
     message.push(
       `WARNING: Unsupported output type "${typeof value}" at cell(${column + (x ?? 0)}, ${