Merge pull request #579 from c-bata/vscode-metadata

Update README and docs for the VS Code extension

CONTRIBUTING.md

@@ -11,10 +11,10 @@ The repository is organized as follows:
 .
 ├── optuna_dashboard/   # The Python package.
 │   └── ts/             # TypeScript code for the Python package.
-├── standalone_app/     # Standalone application that can be run in browser or within the WebView of the VSCode extension.
+├── standalone_app/     # Standalone application that can be run in browser or within the WebView of the VS Code extension.
 │   ├── browser_app_entry.tsx   # Entry point for browser app, hosted on GitHub pages.
-│   └── vscode_entry.tsx        # Entry point for VSCode app, output placed under `vscode/assets`.
-├── vscode/             # The VSCode extension.
+│   └── vscode_entry.tsx        # Entry point for VS Code app, output placed under `vscode/assets`.
+├── vscode/             # The VS Code extension.
 └── rustlib/            # Rust library exporting Wasm functions.
     └── pkg/            # Output directory for rustlib, installed from package.json via `"./rustlib/pkg"`.
 ```
@@ -133,7 +133,7 @@ $ make serve-browser-app
 Open http://127.0.0.1:9000/
 
 
-## VSCode Extension
+## VS Code Extension
 
 ```
 $ npm i -g vsce

README.md

@@ -75,6 +75,13 @@ $ docker run -it --rm -p 8080:8080 ghcr.io/optuna/optuna-dashboard postgresql+ps
 
 </details>
 
+## VS Code Extension (Experimental)
+
+You can install the VS Code extension via [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Optuna.optuna-dashboard#overview).
+
+![vscode-extension](./docs/_static/vscode-extension.png)
+
+Please right-click the SQLite3 files (`*.db` or `*.sqlite3`) in the VS Code file explorer and select the "Open in Optuna Dashboard" command from the dropdown menu.
 
 ## Features
 

docs/getting-started.rst

@@ -201,3 +201,14 @@ you can use ``google.colab.output()`` function as follows:
    output.serve_kernel_port_as_window(port, path='/dashboard/')
 
 Then please open http://localhost:8081/dashboard to browse.
+
+VS Code (Experimental)
+----------------------
+
+You can install the VS Code extension via `Visual Studio Marketplace <https://marketplace.visualstudio.com/items?itemName=Optuna.optuna-dashboard#overview>`_.
+
+.. image:: _static/vscode-extension.png
+   :alt: Screenshot for the VS Code Extension
+   :align: center
+
+Please right-click the SQLite3 files (`*.db` or `*.sqlite3`) in the file explorer and select the "Open in Optuna Dashboard" command from the dropdown menu.

vscode/README.md

@@ -1,17 +1,17 @@
-# optuna-dashboard README
+# Optuna Dashboard for VS Code
 
-## Features
+The Optuna Dashboard extension lets you open Optuna's SQLite3 database in Optuna Dashboard, allowing users to see optimization histories in graphs and tables.
 
-VSCode Extension that launches Optuna Dashboard (Wasm ver.).
+![vscode-extension](https://github.com/optuna/optuna-dashboard/raw/main/docs/_static/vscode-extension.png)
+
+## Usage
+
+Please right-click on the SQLite3 file (`*.db` or `*.sqlite3`) in the file explorer and select the "Open in Optuna Dashboard" command from the dropdown menu.
 
 ## Extension Settings
 
 Nothing to configure.
 
-## Known Issues
-
-* ...
-
 ## Release Notes
 
 ### 0.0.1

vscode/package.json

@@ -2,6 +2,7 @@
   "name": "optuna-dashboard",
   "displayName": "Optuna Dashboard",
   "description": "Web Dashboard for Optuna",
+  "publisher": "Optuna",
   "version": "0.0.1",
   "license": "MIT",
   "icon": "images/optuna-logo.png",

vscode/src/web/extension.ts

@@ -8,7 +8,7 @@ export function activate(context: vscode.ExtensionContext) {
   let disposable = vscode.commands.registerCommand(
     "optuna-dashboard.openOptunaDashboard",
     async (fileUri: vscode.Uri) => {
-      // In VSCode, the path separator of fileUri is always '/'
+      // In VS Code, the path separator of fileUri is always '/'
       // even when using Windows.
       const title = fileUri.path.split("/").pop() || "Optuna Dashboard"
       const panel = vscode.window.createWebviewPanel(