Release webR 0.4.0 (#452)

* webR 0.4.0-rc.0

* Minor design tweaks for use on mobile devices

* webR 0.4.0

* Update NEWS.md

NEWS.md

@@ -1,8 +1,10 @@
 # webR (development version)
 
+# webR 0.4.0
+
 ## New features
 
-* Updated to R version 4.4.0.
+* Updated to R version 4.4.1.
 
 * The capturing mechanism of `captureR()` has been updated so that memory reallocation is performed when outputting very long lines. If reallocation is not possible (e.g. the environment does not have enough free memory to hold the entire line), the previous behaviour of truncating the line output is maintained (#434).
 

flake.nix

@@ -26,7 +26,7 @@
             #     cd src; prefetch-npm-deps package-lock.json
             srcNpmDeps = pkgs.fetchNpmDeps {
               src = "${self}/src";
-              hash = "sha256-FgkBQyaMKHHjSsXvFu6Raj6gegslbvyBT1SvNz52UdY=";
+              hash = "sha256-TdFaeMYs/U/VIX56cN2gqzwJJ3M5Crge2fl/T9L5D4M=";
             };
 
             inherit system;

packages/webr/DESCRIPTION

@@ -1,7 +1,7 @@
 Type: Package
 Package: webr
 Title: WebR Support Package
-Version: 0.3.3.9000
+Version: 0.4.0
 Authors@R: c(
     person("George", "Stagg", , "george.stagg@posit.co", role = c("aut", "cre")),
     person("Lionel", "Henry", , "lionel@posit.co", role = "aut"),

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webr",
-  "version": "0.3.4-dev",
+  "version": "0.4.0",
   "description": "The statistical programming language R compiled into WASM for use in a web browser and node.",
   "keywords": [
     "webR",

src/repl/App.css

@@ -2,6 +2,7 @@ body {
   padding: 0;
   margin: 0;
   font-family: sans-serif;
+  overflow: hidden;
 }
 
 :root {
@@ -15,7 +16,8 @@ body {
 
 .repl {
   width: 100vw;
-  height: 100vh;
+  height: 100vh; /* Fallback for dvh */
+  height: 100dvh;
 }
 
 div[data-panel] {

src/repl/App.tsx

@@ -8,7 +8,7 @@ import { Readline } from 'xterm-readline';
 import { WebR } from '../webR/webr-main';
 import { bufferToBase64 } from '../webR/utils';
 import { CanvasMessage, PagerMessage, ViewMessage, BrowseMessage } from '../webR/webr-chan';
-import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import { Panel, PanelGroup, PanelResizeHandle, ImperativePanelHandle } from 'react-resizable-panels';
 import './App.css';
 import { NamedObject, WebRDataJsAtomic } from '../webR/robj';
 
@@ -147,6 +147,14 @@ const onPanelResize = (size: number) => {
 };
 
 function App() {
+  const rightPanelRef = React.useRef<ImperativePanelHandle | null>(null);
+  React.useEffect(() => {
+    window.addEventListener("resize", () => {
+      if (!rightPanelRef.current) return;
+      onPanelResize(rightPanelRef.current.getSize());
+    });
+  }, []);
+
   return (
     <div className='repl'>
     <PanelGroup direction="horizontal">
@@ -162,7 +170,7 @@ function App() {
         </PanelGroup>
       </Panel>
       <PanelResizeHandle />
-      <Panel onResize={onPanelResize} minSize={10}>
+      <Panel ref={rightPanelRef} onResize={onPanelResize} minSize={10}>
         <PanelGroup direction="vertical">
           <Files webR={webR} filesInterface={filesInterface} />
           <PanelResizeHandle />
@@ -195,7 +203,7 @@ void (async () => {
   await webR.evalRVoid('webr::shim_install()');
 
   // If supported, show a menu when prompted for missing package installation
-  const showMenu = crossOriginIsolated || navigator.serviceWorker.controller;
+  const showMenu = crossOriginIsolated;
   await webR.evalRVoid('options(webr.show_menu = show_menu)', { env: { show_menu: !!showMenu } });
   await webR.evalRVoid('webr::global_prompt_install()', { withHandlers: false });
 

src/repl/components/Plot.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import './Plot.css';
 import { PlotInterface } from '../App';
 import { FaArrowCircleLeft, FaArrowCircleRight, FaRegSave, FaTrashAlt } from 'react-icons/fa';
-import { Panel } from 'react-resizable-panels';
+import { Panel, ImperativePanelHandle } from 'react-resizable-panels';
 import { WebR } from '../../webR/webr-main';
 
 export function Plot({
@@ -13,6 +13,7 @@ export function Plot({
   plotInterface: PlotInterface;
 }) {
   const plotContainerRef = React.useRef<HTMLDivElement | null>(null);
+  const panelRef = React.useRef<ImperativePanelHandle | null>(null);
   const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
   const canvasElements = React.useRef<HTMLCanvasElement[]>([]);
   const plotSize = React.useRef<{width: number, height: number}>({width: 1008, height: 1008});
@@ -42,7 +43,8 @@ export function Plot({
 
     // Resize the canvas() device when the plotting pane changes size
     plotInterface.resize = (direction, px) => {
-      plotSize.current[direction] = Math.max(px / 1.5, 150);
+      const pixelRatio = window.devicePixelRatio || 1.0;
+      plotSize.current[direction] = Math.max( pixelRatio * px / 1.5, 150);
       void webR.init().then(async () => {
         await webR.evalRVoid(`
           # Close any active canvas devices
@@ -61,6 +63,14 @@ export function Plot({
     };
   }, [plotInterface]);
 
+  const onResize = (size:number) => plotInterface.resize("height", size * window.innerHeight / 100);
+  React.useEffect(() => {
+    window.addEventListener("resize", () => {
+      if (!panelRef.current) return;
+      onResize(panelRef.current.getSize());
+    });
+  }, []);
+
   // Update the plot container to display the currently selected canvas element
   React.useEffect(() => {
     if (!plotContainerRef.current) {
@@ -91,10 +101,16 @@ export function Plot({
 
   const nextPlot = () => setSelectedCanvas((selectedCanvas === null) ? null : selectedCanvas + 1);
   const prevPlot = () => setSelectedCanvas((selectedCanvas === null) ? null : selectedCanvas - 1);
-  const onResize = (size:number) => plotInterface.resize("height", size * window.innerHeight / 100);
 
   return (
-    <Panel id="plot" role="region" aria-label="Plotting Pane" minSize={20} onResize={onResize}>
+    <Panel
+      id="plot"
+      role="region"
+      aria-label="Plotting Pane"
+      minSize={20}
+      onResize={onResize}
+      ref={panelRef}
+    >
       <div className="plot-header">
         <div role="toolbar" aria-label="Plotting Toolbar" className="plot-actions">
           <button