gordonsmith / vscode-ojs Goto Github PK

View Code? Open in Web Editor NEW

55.0 7.0 5.0 56.48 MB

VS Code extension for ObservableHQ notebooks

Home Page: https://marketplace.visualstudio.com/items?itemName=GordonSmith.observable-js

License: MIT License

TypeScript 16.63% HTML 3.17% JavaScript 1.68% CSS 78.51%

observablehq vscode-extension

vscode-ojs's People

Contributors

Stargazers

Watchers

Forkers

randomfractals joaomoreno kayodebristol datalayer-externals hydrosquall kingzjs

vscode-ojs's Issues

Add support for HTML and TeX cells

Select cells to render

It would be great to have opportunity to hide some appendix cells

Add Observable JS Notebook Inspector to docs

for OJS users to load and save Observable notebook metada & JS that site exports.

I will be adding Save as .ojs & .omd options to my extension for local OJS notebook runs:

RandomFractals/js-notebook-inspector#54

You can use the format I use for the recommended extensions in docs if you'd like.

I added your extension to my docs ;) RandomFractals/js-notebook-inspector#55

command 'ojs.import' not found

Hello @GordonSmith,
I just installed your Observable JS into my VSCode,
created in the current directory a file, hexagonal-grids.ojs,
and tried to import a notebook with OJS: Import notebook,
but all I get is this error

What am I missing here?

Thanks, @rudifa

Provide notebook UI using VS Code Notebook API

I've been wanting to play with the VS Code Notebook API for a while but I haven't found the time. This extension already has the core functionality for integrating the Observable runtime and parser with the VS Code Notebook API. It would be great if we could work in a notebook like on observablehq.com and have access to VS Code's features (formatters, language servers, and extensions in general). If you haven't tried VS Code's notebook UI, you can try opening a Jupyter notebook file (.ipynb) and it should just work if you have the Python extension installed. I would love to be able to check notebooks into source control, refactor variable names across all of my Observable notebooks, and eventually write Observable notebooks in Node.js or Deno. I will definitely help with this if someone can get the ball rolling 👍

Thank you for making this.

Now I need to learn how to use Observable JS 😓 but its really cool.

fs/system apis

i see there's some fs module but I can't figure how to use. are fs/system apis supported in any way? what about running in a nodejs context? also what about CORS?

Auto-import default Inputs, d3, vl and Plot libraries for the new OJS notebooks that use them

Hi Gordon,

First of all, congrats on crossing 1K installs in VS marketplace.

I wanted to request this auto-import feature for the new OJS notebooks. @mbostock & ObservbableHQ team recently simplified how the above mentioned libraries are used on Observable site.

In order to import them into OJS vscode extension we'd need to add them too when .ojs and .omd files are created and code cells reference them.

I think we can just scan notebook cells code on import and add them at the end of the imported notebook OJS/OMD code.

See Mike's recommended libraries notebook for the latest versions to use:

https://observablehq.com/@observablehq/recommended-libraries

and this example I created recently: https://github.com/RandomFractals/Chicago-transportation-notebooks/blob/main/notebooks/observable/chicago-traffic-tracker.ojs

I had to add them manually in my OJS Imports section, but I think that process can be automated with your OJS notebook importing and loading tool.

Activate OJS extension on "import"

If no ojs or omd files have been loaded previously (or none are in focus) and the user tries to "import file" it will fail.

FYI @pmunin

Preview to Web Page works as expected but Export to HTML does not work

Hi - I am a regular user of R markdown, who has arrived here after switching to Quarto and discovering the awesome world of Observable JS, and imaging the world of possibility running javascript directly on our data in the browser.

However, I am quite new to this, so it is quite possible I am missing something really obvious.

I have installed Observable JS extension v0.4.26 and Javsascript (sic) Notebook Extension Pack Notebook Extension Pack 1.0.6 on Windows 10.

I have tried running HelloWorld.omd.

If I use the OJS: Preview Web Page command, the output is as expected:

However, if I use the OJS: Export to HTML command, and open the resulting web page in Chrome, it is completely blank. The html is:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hpcc-js/common/font-awesome/css/font-awesome.min.css">
    <style>
    body {
        padding: 0px;
        margin: 8px;
        background: white;
        color: black;
    }
    #placeholder {
        position: absolute;
        left: 8px;
        top: 8px;
        right: 8px;
        bottom: 8px;
        max-width: 480px;
    }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/@hpcc-js/observable-md/dist/index.full.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var omdMod = window["@hpcc-js/observable-md"]
    </script>

</head>

<body onresize="doResize()">
    <div id="placeholder">
    </div>
    <script>
        var app = new omdMod.Observable()
            .target("placeholder")
            .showValues(true)
            .mode("omd")
            .text(`# Hello and \${w}

\`\`\`
w = 'Welcome!';
\`\`\``)
            ;

        doResize();

        function doResize() {
        if (app) {
            app
                .resize()
                .lazyRender()
                ;
        }
    }
    </script>
</body>

</html>

If I was trying to compile with Quarto, R markdown or Pandoc, I would know which command was being run when I try to export to html (e.g. quarto render HelloWorld.qmd). However I am completely new to this and I am not sure what is actually happening when I select the Export option in the command palette.

How do I proceed with troubleshooting something like this?

Add this OJS extenion to Data Science, Visualization and Notebooks categories in vscode & marketplace

see this ticket in my repo for more info:

RandomFractals/js-notebook-inspector#40

if you make those changes, this extension will show up in the corresponding extension categories via filter extensions by category in vscode extensions tab or vs marketplace.

see here for example: https://marketplace.visualstudio.com/search?target=VSCode&category=Notebooks

How to debug notebooks?

First, thank you for your work on this @GordonSmith 🙏 There is a lot of potential here and I imagine one day I will be working on Observable notebooks exclusively in VS Code.

I'm testing out the notebook extension and I'm having trouble rendering a cell that renders with no issues on observablehq.com:

Here's a link to the notebook: https://observablehq.com/@gnestor/table-demo

How can I debug this notebook in VS Code like I would by using the console in Chrome Devtools? I checked the "Output" panel and I don't see Observable JS in the list of available outputs.

Clarify OJS settings and review Preview errors

I noticed that you have a setting to show runtime values: https://github.com/GordonSmith/vscode-ojs#settings

I created standard .vscode/settings.json in my OJS notebooks project workspace.

Questions:

Does that setting show cell runtime values for the cells that are not markup or viewof?
Should I see them in a notebook, in vscode debug console, or dev tools?
Should I set that setting in your custom config file per error below?

Please review other errors.

Thanks!

"Failed to fetch" error when importing within .ojsnb after VSCode restart

Hi,

Absolutely loving this library, overall; thank you -- Observable is amazing, but it's a dealbreaker to not be able to use my local tools, so this fills a real gap.

I'm having a hangup trying to import one file from another .ojsnb file. Everything works as expected when viewing the importing notebook through the preview window (Cmd+K V), but when running the cells in the notebook view, it only works until I close and restart VSCode. After a restart, the importing .ojsnb file simply outputs "Failed to fetch", with the quotes, as the output of the import line when running the cells. (other lines in the cell up to the import line run normally, nothing after.)

The issue is reproducible for me with vscode-ojs/samples/myMain.ojs that imports from ./myLib.ojs, converted to a .ojsnb file. (it also reproduces with a fully simplified version of them.)

Any insight into what's causing this behavior, and how to fix it?

I'd be happy to perform any actions you might request of me, let me know.

Narrow notebook content width in exported html webpage view

Hi Gordon,

I tried your new html export option. I like the styles you added for objects and arrays display.

However, I got very narrow webpage view when opening it in FireFox:

and Chrome:

I will try other notebooks.

Repeated Code Execution Issue in OJS - "RuntimeError: x is defined more than once"

Encountering problem with repeated code execution. Initially, running code block with "x = 10" works, but running it again leads to "RuntimeError: x is defined more than once" error.

Add OJS/OMD Preview WebviewPanelSerializer

Gordon,

I added save as .ojs & .omd options to my JS notebook inspector:

RandomFractals/js-notebook-inspector#54

Everything looks good, except OJS/OMD Preview webview is not restored on vscode restart.

before:

that OMD Preview panel is gone after that vscode instance restart:

Expected to see same thing as in pic 1.

It would be nice if you could add WebviewPanelSerializer for those custom .ojs/.omd panels.

See my notebook.view.ts for an example of implementing that api:

https://github.com/RandomFractals/js-notebook-inspector/blob/master/src/views/notebook.view.ts

Add web extension support

It would be great if this extension could be installed and used in a browser context. The motivation is to be able to share notebooks with people by simply sharing a URL (assuming that the notebook is publicly available on Github or somewhere else that's accessible from vscode.dev). Additionally, in Zen Mode, VS Code notebooks look pretty approachable:

Currently, the Observable JS extension can't be installed from vscode.dev:

According to the docs: https://code.visualstudio.com/api/extension-guides/web-extensions#web-extension-enablement

VS Code automatically treats an extension as a web extension if:

The extension manifest (package.json) has browser entry point.

The extension manifest has no main entry point and none of the following contribution points: localizations, debuggers, terminal, typescriptServerPlugins.

If an extension wants to provide a debugger or terminal that also work in the web extension host, a browser entry point needs to be defined.

Some VS Code APIs are not available in a browser context so it may require a bit of refactoring, or not!

Add a way to create a new notebook?

It might be nice to be able to create a new notebook file and start typing, without having to download an existing notebook.

setState/getState tweak

Instead of persisting the current file content, persist the file path instead.