Allow getCells to populate Connections

quadratic-client/src/app/grid/sheet/SheetCursor.ts

@@ -240,4 +240,8 @@ export class SheetCursor {
   overlapsSelection(selection: Selection): boolean {
     return selectionOverlapsSelection(this.getRustSelection(), selection);
   }
+
+  isSingleCellSelection(): boolean {
+    return !this.columnRow && !this.multiCursor;
+  }
 }

quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.css

@@ -16,3 +16,7 @@
 
   @apply text-foreground opacity-50;
 }
+
+.w-cursor {
+  width: 1.5px;
+}

quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorBody.tsx

@@ -143,6 +143,43 @@ export const CodeEditorBody = (props: Props) => {
       monaco.editor.defineTheme('quadratic', QuadraticEditorTheme);
       monaco.editor.setTheme('quadratic');
 
+      // this adds a cursor when the editor is not focused (useful when using insertCellRef button)
+      const decorationCollection = editor.createDecorationsCollection();
+
+      let position: monaco.Position | null = null;
+
+      const updateCursorIndicator = () => {
+        position = editor.getPosition();
+      };
+
+      const hideCursorIndicator = () => decorationCollection.set([]);
+
+      const showCursorIndicator = () => {
+        if (!position) return;
+
+        // Define the decoration that represents the visual indicator
+        const decoration = {
+          range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column + 1),
+          options: {
+            isWholeLine: false,
+            className: 'w-0',
+            before: {
+              content: ' ',
+              backgroundColor: 'transparent',
+              inlineClassName: 'inline-block w-cursor bg-black h-full',
+              inlineClassNameAffectsLetterSpacing: false,
+            },
+          },
+        };
+
+        // Update the decoration collection
+        decorationCollection.set([decoration]);
+      };
+
+      editor.onDidChangeCursorPosition(updateCursorIndicator);
+      editor.onDidFocusEditorText(hideCursorIndicator);
+      editor.onDidBlurEditorText(showCursorIndicator);
+
       // this needs to be before the register conditional below
       setDidMount(true);
 

quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorHeader.tsx

@@ -171,7 +171,9 @@ export const CodeEditorHeader = (props: Props) => {
             <CircularProgress size="1rem" color={'primary'} className={`mr-2`} />
           </TooltipHint>
         )}
-        {hasPermission && ['Python', 'Javascript', 'Formula'].includes(language as string) && <CodeEditorRefButton />}
+        {hasPermission && ['Python', 'Javascript', 'Formula', 'Connection'].includes(language as string) && (
+          <CodeEditorRefButton />
+        )}
         {hasPermission && ['Python', 'Javascript'].includes(language as string) && <SnippetsPopover />}
         {hasPermission &&
           (!isRunningComputation ? (

quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorRefButton.tsx

@@ -15,6 +15,7 @@ import { CaretDownIcon } from '@radix-ui/react-icons';
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { insertCellRef } from './insertCellRef';
+import { codeCellIsAConnection } from '@/app/helpers/codeCellLanguage';
 
 export const CodeEditorRefButton = () => {
   const [relative, setRelative] = useLocalStorage('insertCellRefRelative', false);
@@ -23,19 +24,24 @@ export const CodeEditorRefButton = () => {
   const [disabled, setDisabled] = useState(true);
   useEffect(() => {
     const checkDisabled = () => {
-      // we do not yet support multiple multiCursors for inserting cell references
-      if (
-        (sheets.sheet.cursor.multiCursor && sheets.sheet.cursor.multiCursor.length > 1) ||
-        sheets.sheet.cursor.columnRow !== undefined
-      ) {
-        setDisabled(true);
+      // for connections, we only support one cursor position
+      if (codeCellIsAConnection(editorInteractionState.mode)) {
+        setDisabled(!sheets.sheet.cursor.isSingleCellSelection());
       } else {
-        setDisabled(
-          !sheets.sheet.cursor.multiCursor &&
-            editorInteractionState.selectedCell.x === sheets.sheet.cursor.cursorPosition.x &&
-            editorInteractionState.selectedCell.y === sheets.sheet.cursor.cursorPosition.y &&
-            editorInteractionState.selectedCellSheet === sheets.sheet.id
-        );
+        // we do not yet support multiple multiCursors for inserting cell references in other languages
+        if (
+          (sheets.sheet.cursor.multiCursor && sheets.sheet.cursor.multiCursor.length > 1) ||
+          sheets.sheet.cursor.columnRow !== undefined
+        ) {
+          setDisabled(true);
+        } else {
+          setDisabled(
+            !sheets.sheet.cursor.multiCursor &&
+              editorInteractionState.selectedCell.x === sheets.sheet.cursor.cursorPosition.x &&
+              editorInteractionState.selectedCell.y === sheets.sheet.cursor.cursorPosition.y &&
+              editorInteractionState.selectedCellSheet === sheets.sheet.id
+          );
+        }
       }
     };
     events.on('cursorPosition', checkDisabled);
@@ -48,6 +54,8 @@ export const CodeEditorRefButton = () => {
 
   const tooltip = !disabled ? (
     <>Insert {relative ? 'relative ' : ''}cell reference</>
+  ) : codeCellIsAConnection(editorInteractionState.mode) ? (
+    <>Select one cell on the grid to insert cell reference.</>
   ) : (
     <>Select cells on the grid to insert cell reference.</>
   );

quadratic-client/src/app/ui/menus/CodeEditor/insertCellRef.ts

@@ -68,7 +68,7 @@ export const insertCellRef = (editorInteractionState: EditorInteractionState, re
         }
       }
     }
-  } else if ((language as any) === 'Javascript') {
+  } else if (language === 'Javascript') {
     // any needed until Javascript is properly defined in Javascript branch
     if (cursor.multiCursor) {
       if (cursor.multiCursor.length > 1) {
@@ -102,6 +102,17 @@ export const insertCellRef = (editorInteractionState: EditorInteractionState, re
         }
       }
     }
+  } else if (language === 'Connection') {
+    const location = cursor.cursorPosition;
+    if (sheet) {
+      ref = `{{${location.x},${location.y},'${sheet}'}}`;
+    } else {
+      if (relative) {
+        ref = `{{relative:${location.x - selectedCell.x},${location.y - selectedCell.y}}}`;
+      } else {
+        ref = `{{${location.x},${location.y}}}`;
+      }
+    }
   }
   events.emit('insertCodeEditorText', ref);
 };

quadratic-client/src/app/ui/menus/CodeEditor/useEditorCellHighlights.ts

@@ -10,6 +10,7 @@ import { pixiApp } from '../../../gridGL/pixiApp/PixiApp';
 import { ParseFormulaReturnType, Span } from '../../../helpers/formulaNotation';
 import { StringId, getKey } from '../../../helpers/getKey';
 import { colors } from '../../../theme/colors';
+import { codeCellIsAConnection } from '@/app/helpers/codeCellLanguage';
 
 export function extractCellsFromParseFormula(
   parsedFormula: ParseFormulaReturnType,
@@ -92,7 +93,7 @@ export const useEditorCellHighlights = (
       const modelValue = editor.getValue();
       let parsed;
 
-      if (language === 'Python' || language === 'Javascript') {
+      if (language === 'Python' || language === 'Javascript' || codeCellIsAConnection(language)) {
         parsed = parseCellsAccessed(cellsAccessed) as ParseFormulaReturnType;
       }
 

quadratic-client/src/app/web-workers/quadraticCore/worker/coreConnection.ts

@@ -83,7 +83,7 @@ class CoreConnection {
       });
 
       if (!response.ok) {
-        std_err = await response.text();
+        std_err = (await response.text()) + `\n\nQuery: ${codeRun.code}`;
         console.warn(std_err);
       } else {
         buffer = await response.arrayBuffer();