Skip to content

Commit

Permalink
feat: Add support for more cell types
Browse files Browse the repository at this point in the history
Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>
  • Loading branch information
GordonSmith committed Sep 9, 2022
1 parent 2e789a3 commit 6b2b18e
Show file tree
Hide file tree
Showing 9 changed files with 395 additions and 61 deletions.
15 changes: 15 additions & 0 deletions .vscode/launch.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,21 @@
"${workspaceRoot}/src/notebook/renderers/**/*.js"
],
},
{
"name": "Launch Client with extensions",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"debugWebviews": true,
"args": [
"--extensionDevelopmentPath=${workspaceRoot}",
"${workspaceRoot}\\samples"
],
"outFiles": [
"${workspaceRoot}/src/**/*.js",
"${workspaceRoot}/src/notebook/renderers/**/*.js"
],
},
{
"type": "node",
"request": "attach",
Expand Down
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Copyright 2021 Gordon Smith
Copyright (c) 2022 Gordon Smith

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
82 changes: 52 additions & 30 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,29 @@
# ObservableHQ Notebook | JavaScript | Markdown
# ObservableHQ Notebook

![Pull Build Test](https://img.shields.io/github/workflow/status/GordonSmith/vscode-ojs/Pull%20Build%20Test.svg?logo=github&label=Pull%20Build%20Test)

VS Code extension for Observable "JavaScript" and "Markdown". This extension would not have been possible without the following:
* [ObservableHQ/parser](https://github.com/observablehq/parser)
* [ObservableHQ/runtime](https://github.com/observablehq/runtime)
* [ObservableHQ/inspector](https://github.com/observablehq/inspector)
* [ObservableHQ/stdlib](https://github.com/observablehq/stdlib)
* [@hpcc-js/observable-md](https://github.com/hpcc-systems/Visualization/tree/master/packages/observable-md)
## Supports

- [JavaScript](https://www.javascript.com/) via [ObservableHQ JavaScript](https://observablehq.com/@observablehq/introduction-to-code?collection=@observablehq/notebook-fundamentals)
- [Markdown](https://www.markdownguide.org/)
- [ObservableHQ Markdown](https://observablehq.com/@observablehq/markdown-quick-reference?collection=@observablehq/notebook-fundamentals)
- [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
- [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
- [GraphViz (DOT)](https://graphviz.org/)
- [Mermaid](https://mermaid-js.github.io/mermaid/#/)
- [LaTeX](https://www.latex-project.org/about/)

## Recommended Extension Pack

To get the full experience, it is recommended to install this extension as part of the [JavsaScript Notebook](https://marketplace.visualstudio.com/items?itemName=GordonSmith.js-notebook-extension-pack) extension pack.

## Quick Start with Observable Notebooks (beta)

![Demo GIF](./images/ojsDemoNotebook.gif)

1. Select "OJS: Download Notebook" from command palette.
2. Paste URL from ObservableHQ website, for Example: `https://observablehq.com/@observablehq/five-minute-introduction`
3. Save file to known name and location (Note: Keep the default file extension of "ojsnb").
2. Paste URL from ObservableHQ website, for Example: `https://observablehq.com/@observablehq/five-minute-introduction`
3. Save file to known name and location (Note: Keep the default file extension of "ojsnb").
4. In VS Code open the file.
5. Click "Run All" in the notebook toolbar.

Expand All @@ -28,27 +37,29 @@ VS Code extension for Observable "JavaScript" and "Markdown". This extension wo
4. Enter `https://observablehq.com/@observablehq/a-taste-of-observable` for the import URL.
5. Press `Ctrl+K V` to preview notebook.
6. Select "OJS: Export to HTML" from the command palette.
7. Double click the exported HTML file to view in browser (Note: You may need to host the file on a webserver if it is importing other libraries).
7. Double click the exported HTML file to view in browser (Note: You may need to host the file on a webserver if it is importing other libraries).

## Commands

_All commands are prefixed with "OJS" and are available via the command palette or by default shortcut key mappings_

| Command | Shortcut | Description |
|---------------------------|:--------:|------------------------------------------------------------------|
|OJS: Check Syntax |F7 | Syntax Check |
|OJS: Preview Web Page |Ctrl+K V | Preview notebook in an embedded Web Page |
|OJS: Download Notebook | | Download notebook from ObservableHQ |
|OJS: Import Notebook Cells | | Import published or shared notebook cells into current document |
|OJS: Export to HTML | | Export as a self contained HTML file |
|OJS: Export to ECL | | Export as a self contained ECL attribute |
| Command | Shortcut | Description |
| -------------------------- | :------: | --------------------------------------------------------------- |
| OJS: Check Syntax | F7 | Syntax Check |
| OJS: Preview Web Page | Ctrl+K V | Preview notebook in an embedded Web Page |
| OJS: Download Notebook | | Download notebook from ObservableHQ |
| OJS: Import Notebook Cells | | Import published or shared notebook cells into current document |
| OJS: Export to HTML | | Export as a self contained HTML file |
| OJS: Export to ECL | | Export as a self contained ECL attribute |

## Settings

_All settings are prefixed with "ojs." and are available via `file -> preferneces -> settings` menu_

| Setting | Default | Description |
|---------------------------|:-------:|-----------------------------------------------------------|
| ojs.refreshPreviewOnSave | true | Refresh preview (if visible) when OJS document is saved |
| ojs.showRuntimeValues | false | Show runtime values as diagnostic info |
| Setting | Default | Description |
| ------------------------ | :-----: | ------------------------------------------------------- |
| ojs.refreshPreviewOnSave | true | Refresh preview (if visible) when OJS document is saved |
| ojs.showRuntimeValues | false | Show runtime values as diagnostic info |

## Sample OJS File (myfile.ojs)

Expand Down Expand Up @@ -81,8 +92,9 @@ ${JSON.stringify(cars, undefined, 2)}

## Sample OMD File (myfile.omd)

``````markdown
````markdown
# Generator Test

_Simple Generator test_

```
Expand All @@ -100,6 +112,7 @@ function* range(n) {
```

# Import Test

_Simple Import Test_

```
Expand All @@ -109,16 +122,25 @@ viewof cars;

### Selection:

```json
```json
${JSON.stringify(cars, undefined, 2)}
```

``````
````

## Credits

This extension would not have been possible without the following:

- [ObservableHQ/parser](https://github.com/observablehq/parser)
- [ObservableHQ/runtime](https://github.com/observablehq/runtime)
- [ObservableHQ/inspector](https://github.com/observablehq/inspector)
- [ObservableHQ/stdlib](https://github.com/observablehq/stdlib)
- [@hpcc-js/observable-md](https://github.com/hpcc-systems/Visualization/tree/master/packages/observable-md)

# Recommended Extensions
## Recommended Extensions

Other recommended extensions for working with Observable notebooks formats in [VS Code](https://code.visualstudio.com/):

| Extension | Description |
| --- | --- |
| [Observable JS Notebook Inspector](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.js-notebook-inspector)| VS Code extension for Interactive Preview of Observable JS Notebooks, Notebook Nodes, Cells and source code |
| Extension | Description |
| ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| [Observable JS Notebook Inspector](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.js-notebook-inspector) | VS Code extension for Interactive Preview of Observable JS Notebooks, Notebook Nodes, Cells and source code |
23 changes: 12 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@
"version": "0.4.21",
"publisher": "GordonSmith",
"displayName": "Observable JS",
"description": "Interpreter for ObservableHQ Notebooks - Includes VS Code Notebooks with Observale, Observable \"Markdown\" files with embedded Observable (.omd) and Observable \"JavaScript\" files.",
"description": "Interpreter for ObservableHQ Notebooks - Includes VS Code Notebooks with Observable, Observable \"Markdown\" files with embedded Observable (.omd) and Observable \"JavaScript\" files.",
"icon": "images/ObservableJS.png",
"readme": "README.md",
"license": "SEE LICENSE IN LICENSE.txt",
"categories": [
"Programming Languages",
"Data Science",
Expand All @@ -22,6 +24,7 @@
"@hpcc-js/observable-md"
],
"main": "./dist/extension.js",
"browser": "./dist-web/extension",
"scripts": {
"clean": "rimraf out lib* dist types *.vsix *.tsbuildinfo",
"compile": "tsc",
Expand Down Expand Up @@ -103,9 +106,7 @@
"engines": {
"vscode": "^1.70.0"
},
"extensionDependencies": [
"vscode.javascript"
],
"extensionDependencies": [],
"activationEvents": [
"onLanguage:ojs",
"onNotebook:ojs-notebook",
Expand All @@ -121,22 +122,22 @@
{
"id": "ojs",
"extensions": [
"ojs"
"ojs",
"OJS"
],
"aliases": [
"OJS",
"ojs"
"Observable JavaScript (OJS)"
],
"configuration": "./ojs.configuration.json"
},
{
"id": "omd",
"extensions": [
"omd"
"omd",
"OMD"
],
"aliases": [
"OMD",
"omd"
"Observable Markdown (OMD)"
],
"configuration": "./omd.configuration.json"
}
Expand Down Expand Up @@ -364,4 +365,4 @@
}
]
}
}
}
140 changes: 140 additions & 0 deletions samples/All Cell Types.ojsnb
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
{
"id": "df43e9bfccb61dab",
"slug": "dot",
"trashed": false,
"description": "",
"likes": 80,
"publish_level": "public",
"forks": 13,
"fork_of": null,
"update_time": "2022-04-12T23:05:04.182Z",
"publish_time": "2018-02-01T14:30:30.259Z",
"publish_version": 135,
"latest_version": 135,
"thumbnail": "557949e9175dc43701f9586ad5a22325e9c27462603a09638ec1bf5686dd74ca",
"default_thumbnail": "557949e9175dc43701f9586ad5a22325e9c27462603a09638ec1bf5686dd74ca",
"roles": [],
"sharing": null,
"owner": {
"id": "f35c755083683fe5",
"avatar_url": "https://avatars.observableusercontent.com/avatar/5a51c3b908225a581d20577e488e2aba8cbc9541c52982c638638c370c3e5e8e",
"login": "observablehq",
"name": "Observable",
"bio": "Use data to think, together.",
"home_url": "https://observablehq.com",
"type": "team",
"tier": "enterprise"
},
"creator": {
"id": "074c414ad1d825f5",
"github_login": "mbostock",
"avatar_url": "https://avatars.observableusercontent.com/avatar/82811927da99f8938001b2ef1f552ad2c47083e46ebc55a3a146a5a5848c4519",
"login": "mbostock",
"name": "Mike Bostock",
"bio": "Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.",
"home_url": "https://bost.ocks.org/mike/",
"tier": "basic"
},
"authors": [],
"collections": [
{
"id": "d9df4fb5263ace62",
"type": "public",
"slug": "visualization",
"title": "Visualization",
"description": "Explore and explain patterns in quantitative data using D3, Vega, and Observable Plot",
"update_time": "2022-03-14T18:55:44.501Z",
"pinned": true,
"ordered": false,
"custom_thumbnail": "09e385d95ce7df7d392b0133d68e97dd5675378190775d038d21516ea62178ba",
"default_thumbnail": "1ef827a19d556921d616d53f79fdd6f9eb4d030acb243d70559be3993e4a7292",
"thumbnail": "09e385d95ce7df7d392b0133d68e97dd5675378190775d038d21516ea62178ba",
"listing_count": 82,
"parent_collection_count": 1,
"owner": {
"id": "f35c755083683fe5",
"avatar_url": "https://avatars.observableusercontent.com/avatar/5a51c3b908225a581d20577e488e2aba8cbc9541c52982c638638c370c3e5e8e",
"login": "observablehq",
"name": "Observable",
"bio": "Use data to think, together.",
"home_url": "https://observablehq.com",
"type": "team",
"tier": "enterprise"
}
}
],
"files": [],
"comments": [],
"commenting_lock": null,
"suggestion_from": null,
"suggestions_to": [],
"version": 135,
"title": "Graphviz",
"license": null,
"copyright": "",
"nodes": [
{
"id": 0,
"name": "",
"value": "# Sample Cell Types ",
"mode": "md"
},
{
"id": 1,
"name": "",
"value": "a = 42;\r\n",
"mode": "js"
},
{
"id": 2,
"name": "",
"value": "b = 2",
"mode": "js"
},
{
"id": 3,
"name": "",
"value": "mol = a + b",
"mode": "js"
},
{
"id": 4,
"name": "",
"value": "# Markdown with Observable ${mol}",
"mode": "omd"
},
{
"id": 5,
"name": "",
"value": "<h1>Hello ${mol}</h1>",
"mode": "html"
},
{
"id": 6,
"name": "",
"value": "<svg height=\"100\" width=\"100\">\r\n <circle cx=\"50\" cy=\"50\" r=${mol} stroke=\"black\" stroke-width=\"3\" fill=\"red\" />\r\n</svg> ",
"mode": "svg"
},
{
"id": 7,
"name": "",
"value": "f(x) = \\int_{-\\infty}^\\infty\r\n ${mol}\\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\r\n \\,d\\xi",
"mode": "tex"
},
{
"id": 8,
"name": "",
"value": "gantt\r\ndateFormat YYYY-MM-DD\r\ntitle Adding GANTT diagram to mermaid\r\nexcludes weekdays 2014-01-10\r\n\r\nsection A section\r\nCompleted task :done, des1, 2014-01-06,2014-01-08\r\nActive task :active, des2, 2014-01-09, 3d\r\nFuture task : des3, after des2, 5d\r\nFuture task2 ${mol}: des4, after des3, 5d\r\n",
"mode": "mermaid"
},
{
"id": 9,
"value": "digraph G {\r\n subgraph cluster_0 {\r\n style=filled;\r\n color=lightgrey;\r\n node [style=filled,color=white];\r\n a0 -> a1 -> a2 -> a3;\r\n label = \"process #1\";\r\n }\r\n subgraph cluster_1 {\r\n node [style=filled];\r\n b0 -> b1 -> b2 -> b3;\r\n label = \"process #2\";\r\n color=blue\r\n }\r\n start -> a0;\r\n start -> b0;\r\n a1 -> b3;\r\n b2 -> a3;\r\n a3 -> a0;\r\n a3 -> end;\r\n b3 -> end;\r\n start [shape=Mdiamond];\r\n end [shape=Msquare];\r\n}\r\n",
"pinned": true,
"mode": "dot",
"data": null,
"name": ""
}
],
"resolutions": []
}
Loading

0 comments on commit 6b2b18e

Please sign in to comment.