feat: Chart Support

quadratic-client/public/run_python.py

@@ -313,6 +313,12 @@ async def __getitem__(item):
                     output_value.notnull(), None
                 ).values.tolist()
 
+        try:
+            import plotly
+            if isinstance(output_value, plotly.graph_objs._figure.Figure):
+                output_value = output_value.to_html()
+        except:
+            pass
 
         # Convert Pandas.Series to array_output
         if isinstance(output_value, pd.Series):

quadratic-client/src/grid/controller/Grid.ts

@@ -27,6 +27,7 @@ import {
   CellWrap,
   FormattingSummary,
   JsClipboard,
+  JsHtmlOutput,
   JsRenderCell,
   JsRenderFill,
   Rect,
@@ -122,6 +123,10 @@ export class Grid {
       this.thumbnailDirty = true;
     }
 
+    if (summary.html) {
+      window.dispatchEvent(new CustomEvent('html-update', { detail: summary.html }));
+    }
+
     const cursor = summary.cursor ? (JSON.parse(summary.cursor) as SheetCursorSave) : undefined;
     if (cursor) {
       sheets.current = cursor.sheetId;
@@ -412,6 +417,16 @@ export class Grid {
     this.dirty = true;
   }
 
+  setCellRenderSize(sheetId: string, x: number, y: number, width: number, height: number) {
+    const summary = this.gridController.setCellRenderSize(
+      sheetId,
+      posToRect(x, y),
+      BigInt(Math.round(width)),
+      BigInt(Math.round(height))
+    );
+    this.transactionResponse(summary);
+  }
+
   //#endregion
 
   //#region get grid information
@@ -465,6 +480,11 @@ export class Grid {
     return this.gridController.getRenderBorders(sheetId);
   }
 
+  getHtmlOutput(sheetId: string): JsHtmlOutput[] {
+    const data = this.gridController.getHtmlOutput(sheetId);
+    return JSON.parse(data);
+  }
+
   //#endregion
 
   //#region Bounds

quadratic-client/src/gridGL/QuadraticGrid.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { editorInteractionStateAtom } from '../atoms/editorInteractionStateAtom';
 import { FloatingContextMenu } from '../ui/menus/ContextMenu/FloatingContextMenu';
+import { HtmlCells } from './htmlCells/HtmlCells';
 import { CellInput } from './interaction/CellInput';
 import { useKeyboard } from './interaction/keyboard/useKeyboard';
 import { pixiApp } from './pixiApp/PixiApp';
@@ -16,6 +17,7 @@ export default function QuadraticGrid() {
   const containerRef = useCallback((node: HTMLDivElement | null) => {
     if (node) setContainer(node);
   }, []);
+
   useEffect(() => {
     if (container) pixiApp.attach(container);
   }, [container]);
@@ -90,6 +92,7 @@ export default function QuadraticGrid() {
         outline: 'none',
         overflow: 'hidden',
         WebkitTapHighlightColor: 'transparent',
+        touchAction: 'none',
         cursor: panMode === PanMode.Enabled ? 'grab' : panMode === PanMode.Dragging ? 'grabbing' : 'unset',
       }}
       onContextMenu={(event) => {
@@ -116,6 +119,7 @@ export default function QuadraticGrid() {
       onKeyUp={onKeyUp}
     >
       {showInput && <CellInput container={container} />}
+      <HtmlCells />
       <FloatingContextMenu container={container} showContextMenu={showContextMenu} />
     </div>
   );

quadratic-client/src/gridGL/UI/HtmlPlaceholders.ts

@@ -0,0 +1,67 @@
+import { sheets } from '@/grid/controller/Sheets';
+import { JsHtmlOutput } from '@/quadratic-core/types';
+import { colors } from '@/theme/colors';
+import { Graphics } from 'pixi.js';
+import { TOP_HTML_MARGIN } from '../htmlCells/HtmlCells';
+
+const BORDER_WIDTH = 1;
+
+// Draws the html placeholder for thumbnails
+export class HtmlPlaceholders extends Graphics {
+  // tracks the same data as HtmlCells (duplicated to more easily get it out of react)
+  private htmlOutput: JsHtmlOutput[] = [];
+
+  constructor() {
+    super();
+    this.visible = false;
+  }
+
+  private drawPlaceholder(htmlCell: JsHtmlOutput) {
+    let w = Number(htmlCell.w);
+    let h = Number(htmlCell.h);
+
+    // if width and height = 0 (ie, not user set), then use the size of the HTML element
+    if (!w || !h) {
+      const element = document.querySelector(
+        `[data-sheet="${htmlCell.sheet_id}"][data-pos="${htmlCell.x},${htmlCell.y}"]`
+      );
+      if (!element) return;
+      if (element.tagName === 'iframe') {
+        const iframe = element as HTMLIFrameElement;
+        w = parseFloat(iframe.width);
+        h = parseFloat(iframe.height);
+      } else {
+        w = element.clientWidth;
+        h = element.clientHeight;
+      }
+    }
+    const sheet = sheets.getById(htmlCell.sheet_id);
+    if (!sheet) {
+      throw new Error('Expected sheet to be defined in HtmlPlaceholders.drawPlaceholder');
+    }
+    const offsets = sheet.offsets.getCellOffsets(Number(htmlCell.x), Number(htmlCell.y));
+    this.lineStyle(BORDER_WIDTH, colors.htmlPlaceholderThumbnailBorderColor, 1);
+    this.beginFill(colors.htmlPlaceholderThumbnailColor);
+    this.drawRect(offsets.x, offsets.y + offsets.h + TOP_HTML_MARGIN, w, h);
+    this.endFill();
+  }
+
+  prepare() {
+    this.clear();
+    const firstId = sheets.getFirst().id;
+    this.htmlOutput.forEach((cell) => {
+      if (cell.sheet_id === firstId) {
+        this.drawPlaceholder(cell);
+      }
+    });
+    this.visible = true;
+  }
+
+  hide() {
+    this.visible = false;
+  }
+
+  setHtmlCells(htmlOutput: JsHtmlOutput[]) {
+    this.htmlOutput = htmlOutput;
+  }
+}

quadratic-client/src/gridGL/htmlCells/DivHtmlCell.tsx

@@ -0,0 +1,63 @@
+import { CELL_HEIGHT, CELL_WIDTH } from '@/constants/gridConstants';
+import { sheets } from '@/grid/controller/Sheets';
+import { JsHtmlOutput } from '@/quadratic-core/types';
+import { useCallback } from 'react';
+import { pixiApp } from '../pixiApp/PixiApp';
+import { Wheel } from '../pixiOverride/Wheel';
+
+interface Props {
+  htmlCell: JsHtmlOutput;
+}
+
+export const DivHtmlCell = (props: Props) => {
+  const { htmlCell } = props;
+
+  const ref = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (node) {
+        node.style.width = htmlCell.w ? Number(htmlCell.w) + 'px' : '';
+        node.style.height = htmlCell.h ? Number(htmlCell.h) + 'px' : '';
+        node.innerHTML = htmlCell.html;
+        node.addEventListener(
+          'wheel',
+          (event) => {
+            const wheel = pixiApp.viewport.plugins.get('wheel') as Wheel | null;
+            if (!wheel) {
+              throw new Error('Expected wheel plugin to be defined on viewport');
+            }
+            wheel.wheel(event);
+            event.stopPropagation();
+            event.preventDefault();
+          },
+          { passive: false }
+        );
+      }
+    },
+    [htmlCell.h, htmlCell.html, htmlCell.w]
+  );
+
+  const offset = sheets.sheet.getCellOffsets(Number(htmlCell.x), Number(htmlCell.y));
+
+  return (
+    <div
+      ref={ref}
+      title={`HTML from (${htmlCell.x}, ${htmlCell.y})`}
+      // this is needed by HtmlCells.tsx
+      data-sheet={htmlCell.sheet_id}
+      // this is needed by PointerHtmlCells.ts
+      data-pos={`${htmlCell.x},${htmlCell.y}`}
+      style={{
+        position: 'absolute',
+        pointerEvents: 'auto',
+        left: offset.x,
+        top: offset.y + offset.height,
+        minWidth: `${CELL_WIDTH}px`,
+        minHeight: `${CELL_HEIGHT - 2}px`,
+        background: 'white',
+        border: '1px solid black',
+        boxSizing: 'border-box',
+        overflow: 'hidden',
+      }}
+    />
+  );
+};

quadratic-client/src/gridGL/htmlCells/HTMLResizeControl.css

@@ -0,0 +1,63 @@
+/* Shared styles for the 1px line */
+.resize-control {
+  background-color: var(--resize-control-background);
+  z-index: 10;
+}
+
+/* Vertical control, right side */
+.resize-control--position-RIGHT {
+  width: 1px;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: -1px;
+  cursor: col-resize;
+}
+
+/* Horizontal control, bottom side */
+.resize-control--position-BOTTOM {
+  position: relative;
+  width: 100%;
+  height: 1px;
+  cursor: row-resize;
+  bottom: 0px;
+}
+
+/* Effect upon hover/drag */
+.resize-control:before {
+  content: '';
+  transition: 0.2s ease background-color 0ms;
+}
+.resize-control--position-RIGHT:before {
+  position: absolute;
+  width: 5px;
+  height: 100%;
+  right: -2px;
+  top: 0;
+}
+.resize-control--position-BOTTOM:before {
+  position: absolute;
+  width: 100%;
+  height: 5px;
+  bottom: -2px;
+  left: 0;
+}
+.resize-control--is-dragging:before,
+.resize-control:hover:before {
+  background-color: var(--resize-control-highlight);
+  z-index: 100;
+  /* Delay the transition effect so it only appears when the user shows intent */
+  transition: 0.2s ease background-color 300ms;
+}
+
+/* When control is being dragged, applies styles to body to prevent text
+   selection and try to keep correct cursor displayed */
+body:has(.resize-control--is-dragging) {
+  user-select: none;
+}
+body:has(.resize-control--is-dragging.resize-control--position-LEFT) {
+  cursor: col-resize !important;
+}
+body:has(.resize-control--is-dragging.resize-control--position-TOP) {
+  cursor: row-resize !important;
+}

quadratic-client/src/gridGL/htmlCells/HTMLResizeControl.tsx

@@ -0,0 +1,59 @@
+import { colors } from '@/theme/colors';
+import './HTMLResizeControl.css';
+
+// todo: make this a generic component and combine it with ResizeControl for CodeEditor
+
+interface ResizeControlProps {
+  position: 'BOTTOM' | 'RIGHT';
+}
+
+// the actual class changing is handled in PointerHtmlCells.ts by changing the className programmatically
+export function HTMLResizeControl({ position }: ResizeControlProps) {
+  return (
+    <div
+      className={`resize-control resize-control--position-${position}`}
+      style={{
+        // @ts-expect-error typescript doesn't like us setting CSS custom properties
+        '--resize-control-highlight': colors.quadraticPrimary,
+        '--resize-control-background': colors.mediumGray,
+        pointerEvents: 'none',
+      }}
+      // onPointerDown={(e) => {
+      //   dispatchEvent(new CustomEvent('resize-html-pointer-down', { detail: e }));
+      //   const target = e.currentTarget;
+      //   target.classList.add('resize-control--is-dragging');
+      // }}
+      // onPointerUp={(e) => {
+      //   dispatchEvent(new CustomEvent('resize-html-pointer-up', { detail: e }));
+      //   const target = e.currentTarget;
+      //   target.classList.remove('resize-control--is-dragging');
+      // }}
+
+      // onMouseDown={(e) => {
+      //   // set drag style via class
+      //   const target = e.currentTarget;
+      //   target.classList.add('resize-control--is-dragging');
+
+      //   // function mousemove(event_mousemove: globalThis.MouseEvent) {
+      //   // setState(
+      //   //   position === 'RIGHT'
+      //   //     ? window.innerWidth - event_mousemove.x
+      //   //     : // 51 is a bit of a magic number. It's the height of the CodeEditorHeader
+      //   //       window.innerHeight - event_mousemove.y - 51
+      //   // );
+      //   // }
+
+      //   function mouseup() {
+      //     // window.removeEventListener('mousemove', mousemove);
+      //     window.removeEventListener('mouseup', mouseup);
+
+      //     // revert to non-drag style
+      //     target.classList.remove('resize-control--is-dragging');
+      //   }
+
+      //   // window.addEventListener('mousemove', mousemove);
+      //   window.addEventListener('mouseup', mouseup);
+      // }}
+    />
+  );
+}