Integrate httpgd #620

nx10 · 2021-04-14T13:54:57Z

Update: To check the PR, you need to have httpgd installed and set options(vsc.use_httpgd = TRUE) in your .Rprofile.

What problem did you solve?
This PR contains a very basic integration of httpgd to display plots.
It is intended to be a WIP PR and a continuation of (#614).

I added the implementation of a httpgd server connection backend drafted by @ManuelHentschel and removed the plot styling to make it compatible with all httpgd versions (current CRAN and GitHub master).

@ManuelHentschel will now implement a custom plot viewer that integrates with and uses vscode controls.
The development is also discussed in nx10/httpgd#63.

(This Post will be updated with screenshots and setup instructions as the development continues. Currently these are identical to #614 with the exception that all httpgd versions can be used.)

Edit: The viewer now uses the new api and includes some buttons in the titlebar to control it. In particular, it's possible to toggle between the original svg and the vscode-themed svg using the "Toggle Style" button.

renkun-ken · 2021-05-16T00:35:31Z

Another thing I notice is that when a number of plots are produced, and I click one thumbnail to navigate to different historic plots, then there's a significant delay to show the plot (nearly 1-2 seconds).

Have you changed the settings r.httpgd.timeouts.refreshTimeout and/or r.httpgd.timeouts.resizeTimeout at some point? These can be used to control how eagerly the viewer redraws the plots and might help here. If changing these to a different value (e.g. both 100) doesn't help, please post the code that produces the laggy plots.

Cannot reproduce the delay on macOS. It is probably caused by the plot is a quite comprehensive with too many elements.

renkun-ken · 2021-05-16T00:36:46Z

With the latest commit, the resizing seems a bit problematic that if you repeat running the same plot (e.g. plot(rnorm(100))), then the main plot area is getting smaller and smaller.

ManuelHentschel · 2021-05-16T09:44:13Z

With the latest commit, the resizing seems a bit problematic that if you repeat running the same plot (e.g. plot(rnorm(100))), then the main plot area is getting smaller and smaller.

Thanks for noting!

package.json

package-lock.json

renkun-ken

LGTM. Thanks for the great work!

renkun-ken · 2021-05-16T17:03:57Z

@ManuelHentschel Would you like to update README.md (https://github.com/Ikuyadeu/vscode-R#available-functions-and-options) so that user knows about the vsc.use_httpgd option?

ManuelHentschel · 2021-05-16T17:45:28Z

Thanks for the thorough testing and constructive feedback @renkun-ken!

nx10 · 2021-05-16T17:48:35Z

Great work @ManuelHentschel!

psobolewskiPhD · 2021-05-21T22:01:00Z

The new feature works really well!
Kudos to all involved!

I have a couple questions:

Is it possible to have the vscode theme just do color and not override my font choice (here Fira Sans).
Is it possible to show/hide the history/thumbnails?
the ... menu allows for export, but just svg. Is there a way to to have PNG like the original httpgd functionality?

ManuelHentschel · 2021-05-22T11:37:03Z

Thanks for the feedback!

A quick way to achieve 1. and 2. is to e.g. comment out the line https://github.com/Ikuyadeu/vscode-R/blob/master/html/httpgd/styleOverwrites.css#L9 and change https://github.com/Ikuyadeu/vscode-R/blob/master/html/httpgd/style.css#L53 to display: none;. You can try this out by opening the installation directory of the extension (F1 > Extensions: Open Extensions Folder) and modifying the .css files directly.

I'll also add proper commands/options for this.

Regarding 3., in nx10/httpgd#69 a modular renderering approach is being implemented that will allow exporting to a number of different formats. When this is merged in httpgd, we'll also add corresponding options in vscode-R.

psobolewskiPhD · 2021-05-22T20:38:18Z

Thank you for the clear instructions!
Two more questions:
I'm not in love with the white outline text vs. just white.

I thought I'd comment out the stroke and add fill: white; but that didn't work.
Is that an easy fix?
Edit: Adding !important worked! Much better!

Edit2: If white is too bright for folks, could use an off shade, but the outlining—to me—ruins the letter spacing and is not good.

And more importantly—to me anyways—I hate the boxes around the legend. How can I turn that off?!?

psobolewskiPhD · 2021-05-22T20:46:10Z

I played around a bit more and got—to my eye—very nice results:

Editted styleOverwrites.css as follows:

Edit:
Better yet, I got rid of the outlines around the points!

I know, I'm drunk on power, deleting things!
But here's the new styleOverwrites.css

nx10 · 2021-05-22T20:59:43Z

The dynamic styling is basically just a proof of concept at this point. I plan on adding a second SVG renderer to httpgd that allows for mich easier styling at the expense of slightly increased file sizes (nx10/httpgd#65). This will be included in the next update with the modular rendering.

(It might take a couple weeks/months as I am currently busy writing my masters thesis.)

psobolewskiPhD · 2021-05-22T21:11:52Z

Honestly, it works great and—with the tweaks I just made—for me it looks great!
I really like the ability to easily flip plots from light vs dark mode for display purposes—saving the plots uses the normal (dark on white) colors, which is perfect.
Wonderful feature.
Kudos to you @nx10 and @ManuelHentschel plus everyone else involved in this extension.

nx10 · 2021-05-22T21:38:00Z

Thanks! @ManuelHentschel did most of the work on the vscode-r integration and the theming is completely his idea.

* Liveshare Functionality Implements session watcher features for LiveShare guests * Update package-lock.json * Review changes (1) - isLiveShare now relies on liveSession instead of a new vsls.getApi() call -- Many functions are now synchronous as a result - Various tooltip changes to clarify 'forward guest commands' - Clean up helper bool functions * Move files to liveshare folder As per #641, liveshare files are moved to a /liveshare/ folder, and the "r" prefix has been removed from their name * Review changes (2) - Liveshare API handling -- Abort on timeout -- Retry button - Guest & host workspace always in sync - Guests no longer create files, instead relying on webview + virtual docs - Fix bug with webviews returning object instead of string * Resolve upstream changes (#2) * Share httpgd session with guest - Httpgd sessions are shared with guests through vsls shareBrowser functionality - Resolve some conflicts from upstream merge * Fix merge error + refresh tree - Remove duplicate function declaration - Refresh liveshare tree on retry api * Review changes (3) - Use liveShare.defaults as per #620 - Change overuse of brackets * Better integrate httpgd - The shared httpgd is now opened/reopened even if closed - Shared httpgd is now shared even if started before liveshare - Minor bug fixes * *Better* integrate httpgd - Instead of doing a workaround browser solution, use the native httpgd webview * Minor changes - Change timeout default: 3000 => 10000 - Remove leftover information message - Fix accidental merge overwrite * Fix guest httpgd eagerness - notifyGuestPlotManager is now called less often, preventing it from taking focus unexpectedly * Minor changes - .UUID -> uuid - Shorten commandNode label * Review changes (4) - request() to liveShareRequest() - onRequest() to liveShareOnRequest() - use index design pattern - remove global shareurl - remove badge from README * Lint + misc change - Appease the linter gods

ManuelHentschel and others added 12 commits April 8, 2021 01:05

httpgd

f92a14b

changes

a23235b

Use ejs

b80494e

Click plots

cf47eb4

Add dummy hover and animation for circles

790850e

Various changes

0b1e4cb

Draft types/apis

db3b78b

Add plot title

fa6e74d

Merge remote-tracking branch 'mh/httpgdWIP' into httpgd

7988d2b

Update package-lock.json

28be6e8

Draft httpgd client connection backend

12e38b8

Remove httpgd styles

a47c9a6

nx10 mentioned this pull request Apr 14, 2021

Integrate with vscode-R nx10/httpgd#63

Open

nx10 and others added 17 commits April 15, 2021 13:10

Minor fixes

06a96d9

Implement viewer

3cacbdb

Export svg

ae181e6

Add command to hide plots

f6e67ae

Add command to close plots

47c49a1

Minor changes

1d76222

Add config for default color theme

f385052

Handle multiple open viewers

49ba75f

First attempt at dynamic resizing

8e7484b

Improve resizing

58ba775

Use tsconfig for helpviewer

886295a

Improve dynamic resizing

aeffc27

Reduce padding

0419ccd

Add firstPlot/lastPlot commands

0eaffae

Implement zooming

62f2569

Fix webviewPath

6419752

Cleanup and improved dynamic resizing

ef8151e

ManuelHentschel added 2 commits May 15, 2021 23:55

Reorder menu items

cd9763b

Adjust resizing mechanism

69f5bde

Fix eager html redraw

dd9bc66

Change config and cmd names

cd73a08

renkun-ken reviewed May 16, 2021

View reviewed changes

package.json Show resolved Hide resolved

Rename timeout config entries

aac602b

renkun-ken reviewed May 16, 2021

View reviewed changes

package-lock.json Outdated Show resolved Hide resolved

ManuelHentschel added 2 commits May 16, 2021 18:28

Rename configs

5597254

Update lockfile

22ae20d

renkun-ken approved these changes May 16, 2021

View reviewed changes

Update readme.md

f2aef0d

ManuelHentschel merged commit 47265aa into REditorSupport:master May 16, 2021

renkun-ken mentioned this pull request May 23, 2021

grid::grid.draw() does not work in vscode-R watcher #642

Closed

benz0li mentioned this pull request Jun 12, 2021

Options to customize session watcher behavior #358

Closed

10 tasks

ManuelHentschel mentioned this pull request Jun 20, 2021

Add customization options to plot viewer #678

Merged

eitsupi mentioned this pull request Jul 24, 2021

Update the R definition microsoft/vscode-dev-containers#954

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Integrate httpgd #620

Integrate httpgd #620

nx10 commented Apr 14, 2021 •

edited by ManuelHentschel

Loading

renkun-ken commented May 16, 2021

renkun-ken commented May 16, 2021 •

edited

Loading

ManuelHentschel commented May 16, 2021

renkun-ken left a comment

renkun-ken commented May 16, 2021

ManuelHentschel commented May 16, 2021

nx10 commented May 16, 2021

psobolewskiPhD commented May 21, 2021

ManuelHentschel commented May 22, 2021

psobolewskiPhD commented May 22, 2021 •

edited

Loading

psobolewskiPhD commented May 22, 2021 •

edited

Loading

nx10 commented May 22, 2021

psobolewskiPhD commented May 22, 2021

nx10 commented May 22, 2021

Integrate httpgd #620

Integrate httpgd #620

Conversation

nx10 commented Apr 14, 2021 • edited by ManuelHentschel Loading

renkun-ken commented May 16, 2021

renkun-ken commented May 16, 2021 • edited Loading

ManuelHentschel commented May 16, 2021

renkun-ken left a comment

Choose a reason for hiding this comment

renkun-ken commented May 16, 2021

ManuelHentschel commented May 16, 2021

nx10 commented May 16, 2021

psobolewskiPhD commented May 21, 2021

ManuelHentschel commented May 22, 2021

psobolewskiPhD commented May 22, 2021 • edited Loading

psobolewskiPhD commented May 22, 2021 • edited Loading

nx10 commented May 22, 2021

psobolewskiPhD commented May 22, 2021

nx10 commented May 22, 2021

nx10 commented Apr 14, 2021 •

edited by ManuelHentschel

Loading

renkun-ken commented May 16, 2021 •

edited

Loading

psobolewskiPhD commented May 22, 2021 •

edited

Loading

psobolewskiPhD commented May 22, 2021 •

edited

Loading