mirror of
https://github.com/wassname/optuna-dashboard.git
synced 2026-09-10 12:23:22 +08:00
Publish jupyterlab optuna
This commit is contained in:
shemmi
@@ -0,0 +1,95 @@
|
||||
# jupyterlab-optuna
|
||||
|
||||
A JupyterLab extension for Optuna
|
||||
|
||||
## Requirements
|
||||
|
||||
- JupyterLab >= 4.0.0
|
||||
|
||||
## Install
|
||||
|
||||
To install the extension, execute:
|
||||
|
||||
```bash
|
||||
pip install jupyterlab-optuna
|
||||
```
|
||||
|
||||
## Uninstall
|
||||
|
||||
To remove the extension, execute:
|
||||
|
||||
```bash
|
||||
pip uninstall jupyterlab-optuna
|
||||
```
|
||||
|
||||
## Troubleshoot
|
||||
|
||||
If you are seeing the frontend extension, but it is not working, check
|
||||
that the server extension is enabled:
|
||||
|
||||
```bash
|
||||
jupyter server extension list
|
||||
```
|
||||
|
||||
If the server extension is installed and enabled, but you are not seeing
|
||||
the frontend extension, check the frontend extension is installed:
|
||||
|
||||
```bash
|
||||
jupyter labextension list
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
### Development install
|
||||
|
||||
Note: You will need NodeJS to build the extension package.
|
||||
|
||||
The `jlpm` command is JupyterLab's pinned version of
|
||||
[yarn](https://yarnpkg.com/) that is installed with JupyterLab. You may use
|
||||
`yarn` or `npm` in lieu of `jlpm` below.
|
||||
|
||||
```bash
|
||||
# Clone the repo to your local environment
|
||||
# Change directory to the jupyterlab_optuna directory
|
||||
# Install package in development mode
|
||||
pip install -e ".[dev]"
|
||||
# Link your development version of the extension with JupyterLab
|
||||
jupyter labextension develop . --overwrite
|
||||
# Server extension must be manually installed in develop mode
|
||||
jupyter server extension enable jupyterlab_optuna
|
||||
# Rebuild extension Typescript source after making changes
|
||||
jlpm build
|
||||
```
|
||||
|
||||
You can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the extension.
|
||||
|
||||
```bash
|
||||
# Watch the source directory in one terminal, automatically rebuilding when needed
|
||||
jlpm watch
|
||||
# Run JupyterLab in another terminal
|
||||
jupyter lab
|
||||
```
|
||||
|
||||
With the watch command running, every saved change will immediately be built locally and available in your running JupyterLab. Refresh JupyterLab to load the change in your browser (you may need to wait several seconds for the extension to be rebuilt).
|
||||
|
||||
By default, the `jlpm build` command generates the source maps for this extension to make it easier to debug using the browser dev tools. To also generate source maps for the JupyterLab core extensions, you can run the following command:
|
||||
|
||||
```bash
|
||||
jupyter lab build --minimize=False
|
||||
```
|
||||
|
||||
### Development uninstall
|
||||
|
||||
```bash
|
||||
# Server extension must be manually disabled in develop mode
|
||||
jupyter server extension disable jupyterlab_optuna
|
||||
pip uninstall jupyterlab_optuna
|
||||
```
|
||||
|
||||
In development mode, you will also need to remove the symlink created by `jupyter labextension develop`
|
||||
command. To find its location, you can run `jupyter labextension list` to figure out where the `labextensions`
|
||||
folder is located. Then you can remove the symlink named `jupyterlab-optuna` within that folder.
|
||||
|
||||
### Packaging the extension
|
||||
|
||||
See [RELEASE](RELEASE.md)
|
||||
@@ -0,0 +1,111 @@
|
||||
# Making a new release of jupyterlab_optuna
|
||||
|
||||
The extension can be published to `PyPI` and `npm` manually or using the [Jupyter Releaser](https://github.com/jupyter-server/jupyter_releaser).
|
||||
|
||||
## Manual release
|
||||
|
||||
### Python package
|
||||
|
||||
This extension can be distributed as Python packages. All of the Python
|
||||
packaging instructions are in the `pyproject.toml` file to wrap your extension in a
|
||||
Python package. Before generating a package, you first need to install some tools:
|
||||
|
||||
```bash
|
||||
pip install build twine hatch
|
||||
```
|
||||
|
||||
Bump the version using `hatch`. By default this will create a tag.
|
||||
See the docs on [hatch-nodejs-version](https://github.com/agoose77/hatch-nodejs-version#semver) for details.
|
||||
|
||||
```bash
|
||||
hatch version <new-version>
|
||||
```
|
||||
|
||||
Make sure to clean up all the development files before building the package:
|
||||
|
||||
```bash
|
||||
jlpm clean:all
|
||||
```
|
||||
|
||||
You could also clean up the local git repository:
|
||||
|
||||
```bash
|
||||
git clean -dfX
|
||||
```
|
||||
|
||||
To create a Python source package (`.tar.gz`) and the binary package (`.whl`) in the `dist/` directory, do:
|
||||
|
||||
```bash
|
||||
python -m build
|
||||
```
|
||||
|
||||
> `python setup.py sdist bdist_wheel` is deprecated and will not work for this package.
|
||||
|
||||
Then to upload the package to PyPI, do:
|
||||
|
||||
```bash
|
||||
twine upload dist/*
|
||||
```
|
||||
|
||||
### NPM package
|
||||
|
||||
To publish the frontend part of the extension as a NPM package, do:
|
||||
|
||||
```bash
|
||||
npm login
|
||||
npm publish --access public
|
||||
```
|
||||
|
||||
## Automated releases with the Jupyter Releaser
|
||||
|
||||
The extension repository should already be compatible with the Jupyter Releaser.
|
||||
|
||||
Check out the [workflow documentation](https://jupyter-releaser.readthedocs.io/en/latest/get_started/making_release_from_repo.html) for more information.
|
||||
|
||||
Here is a summary of the steps to cut a new release:
|
||||
|
||||
- Add tokens to the [Github Secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets) in the repository:
|
||||
- `ADMIN_GITHUB_TOKEN` (with "public_repo" and "repo:status" permissions); see the [documentation](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)
|
||||
- `NPM_TOKEN` (with "automation" permission); see the [documentation](https://docs.npmjs.com/creating-and-viewing-access-tokens)
|
||||
- Set up PyPI
|
||||
|
||||
<details><summary>Using PyPI trusted publisher (modern way)</summary>
|
||||
|
||||
- Set up your PyPI project by [adding a trusted publisher](https://docs.pypi.org/trusted-publishers/adding-a-publisher/)
|
||||
- The _workflow name_ is `publish-release.yml` and the _environment_ should be left blank.
|
||||
- Ensure the publish release job as `permissions`: `id-token : write` (see the [documentation](https://docs.pypi.org/trusted-publishers/using-a-publisher/))
|
||||
|
||||
</details>
|
||||
|
||||
<details><summary>Using PyPI token (legacy way)</summary>
|
||||
|
||||
- If the repo generates PyPI release(s), create a scoped PyPI [token](https://packaging.python.org/guides/publishing-package-distribution-releases-using-github-actions-ci-cd-workflows/#saving-credentials-on-github). We recommend using a scoped token for security reasons.
|
||||
|
||||
- You can store the token as `PYPI_TOKEN` in your fork's `Secrets`.
|
||||
|
||||
- Advanced usage: if you are releasing multiple repos, you can create a secret named `PYPI_TOKEN_MAP` instead of `PYPI_TOKEN` that is formatted as follows:
|
||||
|
||||
```text
|
||||
owner1/repo1,token1
|
||||
owner2/repo2,token2
|
||||
```
|
||||
|
||||
If you have multiple Python packages in the same repository, you can point to them as follows:
|
||||
|
||||
```text
|
||||
owner1/repo1/path/to/package1,token1
|
||||
owner1/repo1/path/to/package2,token2
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
- Go to the Actions panel
|
||||
- Run the "Step 1: Prep Release" workflow
|
||||
- Check the draft changelog
|
||||
- Run the "Step 2: Publish Release" workflow
|
||||
|
||||
## Publishing to `conda-forge`
|
||||
|
||||
If the package is not on conda forge yet, check the documentation to learn how to add it: https://conda-forge.org/docs/maintainer/adding_pkgs.html
|
||||
|
||||
Otherwise a bot should pick up the new version publish to PyPI, and open a new PR on the feedstock repository automatically.
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"packageManager": "python",
|
||||
"packageName": "jupyterlab_optuna",
|
||||
"uninstallInstructions": "Use your Python package manager (pip, conda, etc.) to uninstall the package jupyterlab_optuna"
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"ServerApp": {
|
||||
"jpserver_extensions": {
|
||||
"jupyterlab_optuna": true
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
try:
|
||||
from ._version import __version__
|
||||
except ImportError:
|
||||
# Fallback when using the package in dev mode without installing
|
||||
# in editable mode with pip. It is highly recommended to install
|
||||
# the package from a stable release or in editable mode: https://pip.pypa.io/en/stable/topics/local-project-installs/#editable-installs
|
||||
import warnings
|
||||
warnings.warn("Importing 'jupyterlab_optuna' outside a proper installation.")
|
||||
__version__ = "dev"
|
||||
from .handlers import setup_handlers
|
||||
|
||||
|
||||
def _jupyter_labextension_paths():
|
||||
return [{
|
||||
"src": "labextension",
|
||||
"dest": "jupyterlab-optuna"
|
||||
}]
|
||||
|
||||
|
||||
def _jupyter_server_extension_points():
|
||||
return [{
|
||||
"module": "jupyterlab_optuna"
|
||||
}]
|
||||
|
||||
|
||||
def _load_jupyter_server_extension(server_app):
|
||||
"""Registers the API handler to receive HTTP requests from the frontend extension.
|
||||
|
||||
Parameters
|
||||
----------
|
||||
server_app: jupyterlab.labapp.LabApp
|
||||
JupyterLab application instance
|
||||
"""
|
||||
setup_handlers(server_app.web_app)
|
||||
name = "jupyterlab_optuna"
|
||||
server_app.log.info(f"Registered {name} server extension")
|
||||
@@ -0,0 +1,94 @@
|
||||
from __future__ import annotations
|
||||
|
||||
import json
|
||||
import threading
|
||||
from typing import TYPE_CHECKING
|
||||
|
||||
import tornado
|
||||
from jupyter_server.base.handlers import APIHandler
|
||||
from jupyter_server.utils import url_path_join
|
||||
from optuna_dashboard.artifact._backend_to_store import to_artifact_store
|
||||
|
||||
try:
|
||||
from optuna.artifacts import FileSystemArtifactStore
|
||||
except ImportError:
|
||||
from optuna_dashboard.artifact.file_system import \
|
||||
FileSystemBackend as FileSystemArtifactStore
|
||||
|
||||
from optuna_dashboard import wsgi
|
||||
from tornado.web import FallbackHandler
|
||||
from tornado.wsgi import WSGIContainer
|
||||
|
||||
if TYPE_CHECKING:
|
||||
from _typeshed.wsgi import WSGIApplication
|
||||
|
||||
|
||||
API_NAMESPACE = "jupyterlab-optuna"
|
||||
|
||||
_dashboard_app: WSGIApplication | None = None
|
||||
_is_initialized = False
|
||||
threading_lock = threading.Lock()
|
||||
|
||||
|
||||
class RouteHandler(APIHandler):
|
||||
@tornado.web.authenticated
|
||||
def post(self):
|
||||
global _dashboard_app, _is_initialized
|
||||
|
||||
input_data = self.get_json_body()
|
||||
storage_url = input_data.get("storage_url")
|
||||
artifact_path = input_data.get("artifact_path")
|
||||
|
||||
if storage_url is None:
|
||||
self.set_status(400)
|
||||
self.finish(json.dumps({"reason": "storage_url is required"}))
|
||||
return
|
||||
|
||||
if artifact_path:
|
||||
artifact_store = to_artifact_store(FileSystemArtifactStore(artifact_path))
|
||||
else:
|
||||
artifact_store = None
|
||||
|
||||
with threading_lock:
|
||||
_dashboard_app = wsgi(storage=storage_url, artifact_store=artifact_store)
|
||||
_is_initialized = True
|
||||
self.finish(json.dumps({"is_initialized": True}))
|
||||
|
||||
|
||||
class InitializedStateHandler(APIHandler):
|
||||
@tornado.web.authenticated
|
||||
def get(self):
|
||||
self.finish(json.dumps({"is_initialized": _is_initialized}))
|
||||
|
||||
|
||||
def dashboard_app(env, start_response):
|
||||
# Set Content-Type
|
||||
if "/api/" in env["PATH_INFO"]:
|
||||
env["CONTENT_TYPE"] = "application/json"
|
||||
env["PATH_INFO"] = env["PATH_INFO"].replace(f"/{API_NAMESPACE}", "")
|
||||
|
||||
if _dashboard_app is None:
|
||||
start_response("400 Bad Request", [{"Content-Type": "application/json"}])
|
||||
return [b'{"reason": "app is not initialized"}']
|
||||
|
||||
return _dashboard_app(env, start_response)
|
||||
|
||||
|
||||
def setup_handlers(web_app):
|
||||
host_pattern = ".*$"
|
||||
|
||||
base_url = web_app.settings["base_url"]
|
||||
# Prepend the base_url so that it works in a JupyterHub setting
|
||||
initialize_route_pattern = url_path_join(base_url, API_NAMESPACE, "api/is_initialized")
|
||||
handlers = [(initialize_route_pattern, InitializedStateHandler)]
|
||||
web_app.add_handlers(host_pattern, handlers)
|
||||
|
||||
resister_route_pattern = url_path_join(base_url, API_NAMESPACE, "api/register_dashboard_app")
|
||||
handlers = [(resister_route_pattern, RouteHandler)]
|
||||
web_app.add_handlers(host_pattern, handlers)
|
||||
|
||||
route_pattern = url_path_join(base_url, API_NAMESPACE, r"(.*)")
|
||||
handlers = [
|
||||
(route_pattern, FallbackHandler, dict(fallback=WSGIContainer(dashboard_app))),
|
||||
]
|
||||
web_app.add_handlers(host_pattern, handlers)
|
||||
@@ -0,0 +1,130 @@
|
||||
{
|
||||
"name": "jupyterlab-optuna",
|
||||
"version": "0.1.0",
|
||||
"description": "A JupyterLab extension for Optuna",
|
||||
"keywords": [
|
||||
"jupyter",
|
||||
"jupyterlab",
|
||||
"jupyterlab-extension",
|
||||
"optuna"
|
||||
],
|
||||
"homepage": "https://github.com/optuna/optuna-dashboard",
|
||||
"bugs": {
|
||||
"url": "https://github.com/optuna/optuna-dashboard/issues"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "Optuna Development Team",
|
||||
"files": [
|
||||
"lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
|
||||
"style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}"
|
||||
],
|
||||
"main": "lib/index.js",
|
||||
"types": "lib/index.d.ts",
|
||||
"style": "style/index.css",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/optuna/optuna-dashboard.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "jlpm build:lib && jlpm build:labextension:dev",
|
||||
"build:prod": "jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
|
||||
"build:labextension": "jupyter labextension build .",
|
||||
"build:labextension:dev": "jupyter labextension build --development True .",
|
||||
"build:lib": "tsc --sourceMap",
|
||||
"build:lib:prod": "tsc",
|
||||
"clean": "jlpm clean:lib",
|
||||
"clean:lib": "rimraf lib tsconfig.tsbuildinfo",
|
||||
"clean:labextension": "rimraf jupyterlab_optuna/labextension jupyterlab_optuna/_version.py",
|
||||
"clean:all": "jlpm clean:lib && jlpm clean:labextension",
|
||||
"install:extension": "jlpm build",
|
||||
"lint": "jlpm prettier",
|
||||
"lint:check": "jlpm prettier:check",
|
||||
"prettier": "jlpm prettier:base --write --list-different",
|
||||
"prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
|
||||
"prettier:check": "jlpm prettier:base --check",
|
||||
"watch": "run-p watch:src watch:labextension",
|
||||
"watch:src": "tsc -w --sourceMap",
|
||||
"watch:labextension": "jupyter labextension watch ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.10.8",
|
||||
"@emotion/styled": "^11.10.8",
|
||||
"@jupyterlab/application": "^4.0.0",
|
||||
"@jupyterlab/apputils": "^4.0.0",
|
||||
"@jupyterlab/coreutils": "^6.0.0",
|
||||
"@jupyterlab/launcher": "^4.0.0",
|
||||
"@jupyterlab/services": "^7.0.0",
|
||||
"@mui/icons-material": "^5.11.6",
|
||||
"@mui/lab": "^5.0.0-alpha.128",
|
||||
"@mui/material": "^5.12.1",
|
||||
"@types/chroma-js": "^2.4.1",
|
||||
"@types/signals": "^1.0.2",
|
||||
"elkjs": "^0.8.2",
|
||||
"ngl": "^2.1.1",
|
||||
"notistack": "^3.0.1",
|
||||
"plotly.js-dist-min": "^2.22.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-markdown": "^8.0.4",
|
||||
"react-router-dom": "6.11.0",
|
||||
"react-syntax-highlighter": "^15.5.0",
|
||||
"reactflow": "^11.8.3",
|
||||
"recoil": "^0.7.7",
|
||||
"rehype-mathjax": "^4.0.2",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"remark-math": "^5.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@jupyterlab/builder": "^4.0.0",
|
||||
"@types/json-schema": "^7.0.11",
|
||||
"@types/plotly.js": "^2.12.11",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"@types/react-syntax-highlighter": "^15.5.5",
|
||||
"css-loader": "^6.8.1",
|
||||
"mkdirp": "^1.0.3",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^2.8.7",
|
||||
"rimraf": "^4.4.1",
|
||||
"source-map-loader": "^1.0.2",
|
||||
"style-loader": "^3.3.3",
|
||||
"typescript": "~5.0.2",
|
||||
"yjs": "^13.5.0"
|
||||
},
|
||||
"sideEffects": [
|
||||
"style/*.css",
|
||||
"style/index.js"
|
||||
],
|
||||
"styleModule": "style/index.js",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"jupyterlab": {
|
||||
"discovery": {
|
||||
"server": {
|
||||
"managers": [
|
||||
"pip"
|
||||
],
|
||||
"base": {
|
||||
"name": "jupyterlab_optuna"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extension": true,
|
||||
"outputDir": "jupyterlab_optuna/labextension"
|
||||
},
|
||||
"prettier": {
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"arrowParens": "avoid",
|
||||
"endOfLine": "auto",
|
||||
"overrides": [
|
||||
{
|
||||
"files": "package.json",
|
||||
"options": {
|
||||
"tabWidth": 4
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
[build-system]
|
||||
requires = ["hatchling>=1.5.0", "jupyterlab>=4.0.0,<5", "hatch-nodejs-version>=0.3.2"]
|
||||
build-backend = "hatchling.build"
|
||||
|
||||
[project]
|
||||
name = "jupyterlab-optuna"
|
||||
readme = "README.md"
|
||||
license = { file = "LICENSE" }
|
||||
requires-python = ">=3.8"
|
||||
classifiers = [
|
||||
"Framework :: Jupyter",
|
||||
"Framework :: Jupyter :: JupyterLab",
|
||||
"Framework :: Jupyter :: JupyterLab :: 4",
|
||||
"Framework :: Jupyter :: JupyterLab :: Extensions",
|
||||
"Framework :: Jupyter :: JupyterLab :: Extensions :: Prebuilt",
|
||||
"License :: OSI Approved :: MIT License",
|
||||
"Programming Language :: Python",
|
||||
"Programming Language :: Python :: 3",
|
||||
"Programming Language :: Python :: 3.8",
|
||||
"Programming Language :: Python :: 3.9",
|
||||
"Programming Language :: Python :: 3.10",
|
||||
"Programming Language :: Python :: 3.11",
|
||||
]
|
||||
dependencies = [
|
||||
"jupyter_server>=2.0.1,<3", "optuna-dashboard>=0.12.0"
|
||||
]
|
||||
dynamic = ["version", "description", "authors", "urls", "keywords"]
|
||||
|
||||
[project.optional-dependencies]
|
||||
dev = ["jupyter"]
|
||||
|
||||
[tool.hatch.version]
|
||||
source = "nodejs"
|
||||
|
||||
[tool.hatch.metadata.hooks.nodejs]
|
||||
fields = ["description", "authors", "urls"]
|
||||
|
||||
[tool.hatch.build.targets.sdist]
|
||||
artifacts = ["jupyterlab_optuna/labextension"]
|
||||
exclude = [".github", "binder"]
|
||||
|
||||
[tool.hatch.build.targets.wheel.shared-data]
|
||||
"jupyterlab_optuna/labextension" = "share/jupyter/labextensions/jupyterlab-optuna"
|
||||
"install.json" = "share/jupyter/labextensions/jupyterlab-optuna/install.json"
|
||||
"jupyter-config/server-config" = "etc/jupyter/jupyter_server_config.d"
|
||||
|
||||
[tool.hatch.build.hooks.version]
|
||||
path = "jupyterlab_optuna/_version.py"
|
||||
|
||||
[tool.hatch.build.hooks.jupyter-builder]
|
||||
dependencies = ["hatch-jupyter-builder>=0.5"]
|
||||
build-function = "hatch_jupyter_builder.npm_builder"
|
||||
ensured-targets = [
|
||||
"jupyterlab_optuna/labextension/static/style.js",
|
||||
"jupyterlab_optuna/labextension/package.json",
|
||||
]
|
||||
skip-if-exists = ["jupyterlab_optuna/labextension/static/style.js"]
|
||||
|
||||
[tool.hatch.build.hooks.jupyter-builder.build-kwargs]
|
||||
build_cmd = "build:prod"
|
||||
npm = ["jlpm"]
|
||||
|
||||
[tool.hatch.build.hooks.jupyter-builder.editable-build-kwargs]
|
||||
build_cmd = "install:extension"
|
||||
npm = ["jlpm"]
|
||||
source_dir = "src"
|
||||
build_dir = "jupyterlab_optuna/labextension"
|
||||
|
||||
[tool.jupyter-releaser.options]
|
||||
version_cmd = "hatch version"
|
||||
|
||||
[tool.jupyter-releaser.hooks]
|
||||
before-build-npm = [
|
||||
"python -m pip install 'jupyterlab>=4.0.0,<5'",
|
||||
"jlpm",
|
||||
"jlpm build:prod"
|
||||
]
|
||||
before-build-python = ["jlpm clean:all"]
|
||||
|
||||
[tool.check-wheel-contents]
|
||||
ignore = ["W002"]
|
||||
@@ -0,0 +1 @@
|
||||
__import__("setuptools").setup()
|
||||
@@ -0,0 +1,419 @@
|
||||
import { requestAPI } from './handler';
|
||||
|
||||
type APIMeta = {
|
||||
artifact_is_available: boolean;
|
||||
};
|
||||
|
||||
export const getMetaInfoAPI = (): Promise<APIMeta> => {
|
||||
return requestAPI<APIMeta>(`/api/meta`).then<APIMeta>(res => res);
|
||||
};
|
||||
|
||||
interface TrialResponse {
|
||||
trial_id: number;
|
||||
study_id: number;
|
||||
number: number;
|
||||
state: TrialState;
|
||||
values?: TrialValueNumber[];
|
||||
intermediate_values: TrialIntermediateValue[];
|
||||
datetime_start?: string;
|
||||
datetime_complete?: string;
|
||||
params: TrialParam[];
|
||||
fixed_params: {
|
||||
name: string;
|
||||
param_external_value: string;
|
||||
}[];
|
||||
user_attrs: Attribute[];
|
||||
note: Note;
|
||||
artifacts: Artifact[];
|
||||
constraints: number[];
|
||||
}
|
||||
|
||||
const convertTrialResponse = (res: TrialResponse): Trial => {
|
||||
return {
|
||||
trial_id: res.trial_id,
|
||||
study_id: res.study_id,
|
||||
number: res.number,
|
||||
state: res.state,
|
||||
values: res.values,
|
||||
intermediate_values: res.intermediate_values,
|
||||
datetime_start: res.datetime_start
|
||||
? new Date(res.datetime_start)
|
||||
: undefined,
|
||||
datetime_complete: res.datetime_complete
|
||||
? new Date(res.datetime_complete)
|
||||
: undefined,
|
||||
params: res.params,
|
||||
fixed_params: res.fixed_params,
|
||||
user_attrs: res.user_attrs,
|
||||
note: res.note,
|
||||
artifacts: res.artifacts,
|
||||
constraints: res.constraints
|
||||
};
|
||||
};
|
||||
|
||||
interface PreferenceHistoryResponse {
|
||||
history: {
|
||||
id: string
|
||||
candidates: number[]
|
||||
clicked: number
|
||||
mode: PreferenceFeedbackMode
|
||||
timestamp: string
|
||||
preferences: [number, number][]
|
||||
}
|
||||
is_removed: boolean
|
||||
}
|
||||
|
||||
const convertPreferenceHistory = (
|
||||
res: PreferenceHistoryResponse
|
||||
): PreferenceHistory => {
|
||||
return {
|
||||
id: res.history.id,
|
||||
candidates: res.history.candidates,
|
||||
clicked: res.history.clicked,
|
||||
feedback_mode: res.history.mode,
|
||||
timestamp: new Date(res.history.timestamp),
|
||||
preferences: res.history.preferences,
|
||||
is_removed: res.is_removed,
|
||||
}
|
||||
}
|
||||
|
||||
interface StudyDetailResponse {
|
||||
name: string;
|
||||
datetime_start: string;
|
||||
directions: StudyDirection[];
|
||||
user_attrs: Attribute[];
|
||||
trials: TrialResponse[];
|
||||
best_trials: TrialResponse[];
|
||||
intersection_search_space: SearchSpaceItem[];
|
||||
union_search_space: SearchSpaceItem[];
|
||||
union_user_attrs: AttributeSpec[];
|
||||
has_intermediate_values: boolean;
|
||||
note: Note;
|
||||
is_preferential: boolean;
|
||||
objective_names?: string[];
|
||||
form_widgets?: FormWidgets;
|
||||
preferences?: [number, number][];
|
||||
preference_history?: PreferenceHistoryResponse[];
|
||||
feedback_component_type: FeedbackComponentType;
|
||||
skipped_trial_numbers?: number[]
|
||||
}
|
||||
|
||||
export const getStudyDetailAPI = (
|
||||
studyId: number,
|
||||
nLocalTrials: number
|
||||
): Promise<StudyDetail> => {
|
||||
return requestAPI<StudyDetailResponse>(
|
||||
`/api/studies/${studyId}/?after=${nLocalTrials}`,
|
||||
{
|
||||
method: 'GET'
|
||||
}
|
||||
).then(res => {
|
||||
const trials = res.trials.map((trial): Trial => {
|
||||
return convertTrialResponse(trial);
|
||||
});
|
||||
const best_trials = res.best_trials.map((trial): Trial => {
|
||||
return convertTrialResponse(trial);
|
||||
});
|
||||
return {
|
||||
id: studyId,
|
||||
name: res.name,
|
||||
datetime_start: new Date(res.datetime_start),
|
||||
directions: res.directions,
|
||||
user_attrs: res.user_attrs,
|
||||
trials: trials,
|
||||
best_trials: best_trials,
|
||||
union_search_space: res.union_search_space,
|
||||
intersection_search_space: res.intersection_search_space,
|
||||
union_user_attrs: res.union_user_attrs,
|
||||
has_intermediate_values: res.has_intermediate_values,
|
||||
note: res.note,
|
||||
objective_names: res.objective_names,
|
||||
form_widgets: res.form_widgets,
|
||||
is_preferential: res.is_preferential,
|
||||
feedback_component_type: res.feedback_component_type,
|
||||
preferences: res.preferences,
|
||||
preference_history: res.preference_history?.map(
|
||||
convertPreferenceHistory
|
||||
),
|
||||
skipped_trial_numbers: res.skipped_trial_numbers ?? [],
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
interface StudySummariesResponse {
|
||||
study_summaries: {
|
||||
study_id: number;
|
||||
study_name: string;
|
||||
directions: StudyDirection[];
|
||||
user_attrs: Attribute[];
|
||||
is_preferential: boolean;
|
||||
datetime_start?: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
export const getStudySummariesAPI = (): Promise<StudySummary[]> => {
|
||||
return requestAPI<StudySummariesResponse>(`/api/studies`).then(res => {
|
||||
return res.study_summaries.map((study): StudySummary => {
|
||||
return {
|
||||
study_id: study.study_id,
|
||||
study_name: study.study_name,
|
||||
directions: study.directions,
|
||||
user_attrs: study.user_attrs,
|
||||
is_preferential: study.is_preferential,
|
||||
datetime_start: study.datetime_start
|
||||
? new Date(study.datetime_start)
|
||||
: undefined
|
||||
};
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
interface CreateNewStudyResponse {
|
||||
study_summary: {
|
||||
study_id: number;
|
||||
study_name: string;
|
||||
directions: StudyDirection[];
|
||||
user_attrs: Attribute[];
|
||||
is_preferential: boolean,
|
||||
datetime_start?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const createNewStudyAPI = (
|
||||
studyName: string,
|
||||
directions: StudyDirection[]
|
||||
): Promise<StudySummary> => {
|
||||
return requestAPI<CreateNewStudyResponse>(`/api/studies`, {
|
||||
body: JSON.stringify({
|
||||
study_name: studyName,
|
||||
directions
|
||||
}),
|
||||
method: 'POST'
|
||||
}).then(res => {
|
||||
const study_summary = res.study_summary;
|
||||
return {
|
||||
study_id: study_summary.study_id,
|
||||
study_name: study_summary.study_name,
|
||||
directions: study_summary.directions,
|
||||
// best_trial: undefined,
|
||||
user_attrs: study_summary.user_attrs,
|
||||
is_preferential: study_summary.is_preferential,
|
||||
datetime_start: study_summary.datetime_start
|
||||
? new Date(study_summary.datetime_start)
|
||||
: undefined
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export const deleteStudyAPI = (studyId: number): Promise<void> => {
|
||||
return requestAPI<void>(`/api/studies/${studyId}`, {
|
||||
method: 'DELETE'
|
||||
}).then(() => {
|
||||
return;
|
||||
});
|
||||
};
|
||||
|
||||
type RenameStudyResponse = {
|
||||
study_id: number;
|
||||
study_name: string;
|
||||
directions: StudyDirection[];
|
||||
user_attrs: Attribute[];
|
||||
is_preferential: boolean,
|
||||
datetime_start?: string;
|
||||
};
|
||||
|
||||
export const renameStudyAPI = (
|
||||
studyId: number,
|
||||
studyName: string
|
||||
): Promise<StudySummary> => {
|
||||
return requestAPI<RenameStudyResponse>(`/api/studies/${studyId}/rename`, {
|
||||
body: JSON.stringify({ study_name: studyName }),
|
||||
method: 'POST'
|
||||
}).then(res => {
|
||||
return {
|
||||
study_id: res.study_id,
|
||||
study_name: res.study_name,
|
||||
directions: res.directions,
|
||||
user_attrs: res.user_attrs,
|
||||
is_preferential: res.is_preferential,
|
||||
datetime_start: res.datetime_start
|
||||
? new Date(res.datetime_start)
|
||||
: undefined
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export const saveStudyNoteAPI = (
|
||||
studyId: number,
|
||||
note: { version: number; body: string }
|
||||
): Promise<void> => {
|
||||
return requestAPI<void>(`/api/studies/${studyId}/note`, {
|
||||
body: JSON.stringify(note),
|
||||
method: 'PUT'
|
||||
}).then(() => {
|
||||
return;
|
||||
});
|
||||
};
|
||||
|
||||
export const saveTrialNoteAPI = (
|
||||
studyId: number,
|
||||
trialId: number,
|
||||
note: { version: number; body: string }
|
||||
): Promise<void> => {
|
||||
return requestAPI<void>(`/api/studies/${studyId}/${trialId}/note`, {
|
||||
body: JSON.stringify(note),
|
||||
method: 'PUT'
|
||||
}).then(() => {
|
||||
return;
|
||||
});
|
||||
};
|
||||
|
||||
type UploadArtifactAPIResponse = {
|
||||
artifact_id: string;
|
||||
artifacts: Artifact[];
|
||||
};
|
||||
|
||||
export const uploadArtifactAPI = (
|
||||
studyId: number,
|
||||
trialId: number,
|
||||
fileName: string,
|
||||
dataUrl: string
|
||||
): Promise<UploadArtifactAPIResponse> => {
|
||||
return requestAPI<UploadArtifactAPIResponse>(
|
||||
`/api/artifacts/${studyId}/${trialId}`,
|
||||
{
|
||||
body: JSON.stringify({
|
||||
file: dataUrl,
|
||||
filename: fileName
|
||||
}),
|
||||
method: 'POST'
|
||||
}
|
||||
).then(res => {
|
||||
return res;
|
||||
});
|
||||
};
|
||||
|
||||
export const deleteArtifactAPI = (
|
||||
studyId: number,
|
||||
trialId: number,
|
||||
artifactId: string
|
||||
): Promise<void> => {
|
||||
return requestAPI<void>(
|
||||
`/api/artifacts/${studyId}/${trialId}/${artifactId}`,
|
||||
{
|
||||
method: 'DELETE'
|
||||
}
|
||||
).then(() => {
|
||||
return;
|
||||
});
|
||||
};
|
||||
|
||||
export const tellTrialAPI = (
|
||||
trialId: number,
|
||||
state: TrialStateFinished,
|
||||
values?: number[]
|
||||
): Promise<void> => {
|
||||
const req: { state: TrialState; values?: number[] } = {
|
||||
state: state,
|
||||
values: values
|
||||
};
|
||||
|
||||
return requestAPI<void>(`/api/trials/${trialId}/tell`, {
|
||||
body: JSON.stringify(req),
|
||||
method: 'POST'
|
||||
}).then(() => {
|
||||
return;
|
||||
});
|
||||
};
|
||||
|
||||
export const saveTrialUserAttrsAPI = (
|
||||
trialId: number,
|
||||
user_attrs: { [key: string]: number | string }
|
||||
): Promise<void> => {
|
||||
const req = { user_attrs: user_attrs };
|
||||
|
||||
return requestAPI<void>(`/api/trials/${trialId}/user-attrs`, {
|
||||
body: JSON.stringify(req),
|
||||
method: 'POST'
|
||||
}).then(() => {
|
||||
return;
|
||||
});
|
||||
};
|
||||
|
||||
interface ParamImportancesResponse {
|
||||
param_importances: ParamImportance[][];
|
||||
}
|
||||
|
||||
export const getParamImportances = (
|
||||
studyId: number
|
||||
): Promise<ParamImportance[][]> => {
|
||||
return requestAPI<ParamImportancesResponse>(
|
||||
`/api/studies/${studyId}/param_importances`
|
||||
).then(res => {
|
||||
return res.param_importances;
|
||||
});
|
||||
};
|
||||
|
||||
export const reportPreferenceAPI = (
|
||||
studyId: number,
|
||||
candidates: number[],
|
||||
clicked: number
|
||||
): Promise<void> => {
|
||||
return requestAPI<void>(`/api/studies/${studyId}/preference`, {
|
||||
body: JSON.stringify({
|
||||
candidates: candidates,
|
||||
clicked: clicked,
|
||||
mode: "ChooseWorst",
|
||||
}),
|
||||
method: 'POST'
|
||||
}).then(() => {
|
||||
return
|
||||
});
|
||||
}
|
||||
|
||||
export const skipPreferentialTrialAPI = (
|
||||
studyId: number,
|
||||
trialId: number
|
||||
): Promise<void> => {
|
||||
return requestAPI<void>(`/api/studies/${studyId}/${trialId}/skip`, {
|
||||
method: 'POST'
|
||||
}).then(() => {
|
||||
return
|
||||
})
|
||||
}
|
||||
|
||||
export const removePreferentialHistoryAPI = (
|
||||
studyId: number,
|
||||
historyUuid: string
|
||||
): Promise<void> => {
|
||||
return requestAPI<void>(`/api/studies/${studyId}/preference/${historyUuid}`,{
|
||||
method: 'DELETE'
|
||||
}).then(() => {
|
||||
return
|
||||
})
|
||||
}
|
||||
|
||||
export const restorePreferentialHistoryAPI = (
|
||||
studyId: number,
|
||||
historyUuid: string
|
||||
): Promise<void> => {
|
||||
return requestAPI<void>(`/api/studies/${studyId}/preference/${historyUuid}`,{
|
||||
method: 'POST'
|
||||
}).then(() => {
|
||||
return
|
||||
})
|
||||
}
|
||||
|
||||
export const reportFeedbackComponentAPI = (
|
||||
studyId: number,
|
||||
component_type: FeedbackComponentType
|
||||
): Promise<void> => {
|
||||
return requestAPI<void>(
|
||||
`/api/studies/${studyId}/preference_feedback_component`, {
|
||||
body: JSON.stringify({ component_type: component_type }),
|
||||
method: 'POST'
|
||||
}
|
||||
).then(() => {
|
||||
return
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,239 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
CssBaseline,
|
||||
FormControl,
|
||||
Typography
|
||||
} from '@mui/material';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import RestartAltIcon from '@mui/icons-material/RestartAlt';
|
||||
import StartIcon from '@mui/icons-material/Start';
|
||||
import { SnackbarProvider, enqueueSnackbar } from 'notistack';
|
||||
import React, {
|
||||
Dispatch,
|
||||
FC,
|
||||
SetStateAction,
|
||||
useEffect,
|
||||
useState
|
||||
} from 'react';
|
||||
import { App } from './App';
|
||||
import { DebouncedInputTextField } from './Debounce';
|
||||
import { requestAPI } from '../handler';
|
||||
|
||||
export const JupyterLabEntrypoint: FC = () => {
|
||||
const [ready, setReady] = useState(false);
|
||||
|
||||
if (!ready) {
|
||||
return (
|
||||
<>
|
||||
<CssBaseline />
|
||||
<SnackbarProvider maxSnack={3}>
|
||||
<Box
|
||||
sx={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<JupyterLabStartWidget
|
||||
showOptunaDashboard={() => {
|
||||
setReady(true);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</SnackbarProvider>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return <App />;
|
||||
}
|
||||
};
|
||||
|
||||
const JupyterLabStartWidget: FC<{
|
||||
showOptunaDashboard: () => void;
|
||||
}> = ({ showOptunaDashboard }) => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isInitialized, setIsInitialized] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
requestAPI<{ is_initialized: boolean }>(`/api/is_initialized`, {
|
||||
method: 'GET'
|
||||
})
|
||||
.then(res => {
|
||||
setIsInitialized(res.is_initialized);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(err => {
|
||||
setLoading(false);
|
||||
enqueueSnackbar('Failed to check the initialized state', {
|
||||
variant: 'error'
|
||||
});
|
||||
console.error(err);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (isInitialized) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '600px',
|
||||
borderRadius: '8px',
|
||||
boxShadow: 'rgba(0, 0, 0, 0.08) 0 8px 24px',
|
||||
padding: '64px'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4">Continue or Reset?</Typography>
|
||||
<Typography sx={{ margin: '8px 0' }}>
|
||||
Continue with the existing storage URL and artifact path settings, or
|
||||
you can reset them.
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={showOptunaDashboard}
|
||||
color="primary"
|
||||
startIcon={<StartIcon />}
|
||||
sx={{ margin: '8px 0', minWidth: '120px' }}
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => {
|
||||
setIsInitialized(false);
|
||||
}}
|
||||
color="primary"
|
||||
startIcon={<RestartAltIcon />}
|
||||
sx={{ margin: '8px 0', minWidth: '120px' }}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<StartDashboardForm
|
||||
showOptunaDashboard={showOptunaDashboard}
|
||||
setLoading={setLoading}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const StartDashboardForm: FC<{
|
||||
showOptunaDashboard: () => void;
|
||||
setLoading: Dispatch<SetStateAction<boolean>>;
|
||||
}> = ({ showOptunaDashboard, setLoading }) => {
|
||||
const [storageURL, setStorageURL] = useState('');
|
||||
const [artifactPath, setArtifactPath] = useState('');
|
||||
const [isValidURL, setIsValidURL] = useState(false);
|
||||
|
||||
const rfc1738Pattern = new RegExp(
|
||||
`[\\w\\+]+://([^:/]*(.*)?@)?((\\[[^/]+\\]|[^/:]+)?([^/]*)?)?(/.*)?`
|
||||
);
|
||||
|
||||
const handleValidateURL = (url: string): void => {
|
||||
url.startsWith('redis') || url.match(rfc1738Pattern)
|
||||
? setIsValidURL(true)
|
||||
: setIsValidURL(false);
|
||||
};
|
||||
|
||||
const handleCreateNewDashboard = () => {
|
||||
setLoading(true);
|
||||
requestAPI<{ is_initialized: boolean }>(`/api/register_dashboard_app`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
storage_url: storageURL,
|
||||
artifact_path: artifactPath
|
||||
})
|
||||
})
|
||||
.then(res => {
|
||||
setLoading(false);
|
||||
showOptunaDashboard();
|
||||
})
|
||||
.catch(err => {
|
||||
setLoading(false);
|
||||
enqueueSnackbar('Failed to initialize Optuna Dashboard', {
|
||||
variant: 'error'
|
||||
});
|
||||
console.error(err);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '600px',
|
||||
borderRadius: '8px',
|
||||
boxShadow: 'rgba(0, 0, 0, 0.08) 0 8px 24px',
|
||||
padding: '64px'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4">Initialize Dashboard</Typography>
|
||||
<Typography sx={{ margin: '8px 0' }}>
|
||||
Please enter a storage URL and an artifact path.
|
||||
</Typography>
|
||||
<FormControl>
|
||||
<DebouncedInputTextField
|
||||
onChange={s => {
|
||||
handleValidateURL(s);
|
||||
setStorageURL(s);
|
||||
}}
|
||||
delay={500}
|
||||
textFieldProps={{
|
||||
autoFocus: true,
|
||||
fullWidth: true,
|
||||
label: 'Storage URL',
|
||||
type: 'text',
|
||||
sx: { margin: '8px 0' }
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<DebouncedInputTextField
|
||||
onChange={s => {
|
||||
setArtifactPath(s);
|
||||
}}
|
||||
delay={500}
|
||||
textFieldProps={{
|
||||
fullWidth: true,
|
||||
label: 'Artifact path (Optional)',
|
||||
type: 'text',
|
||||
sx: { margin: '8px 0' }
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleCreateNewDashboard}
|
||||
color="primary"
|
||||
disabled={!isValidURL}
|
||||
sx={{ margin: '8px 0' }}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,46 @@
|
||||
import { URLExt } from '@jupyterlab/coreutils';
|
||||
|
||||
import { ServerConnection } from '@jupyterlab/services';
|
||||
|
||||
/**
|
||||
* Call the API extension
|
||||
*
|
||||
* @param endPoint API REST end point for the extension
|
||||
* @param init Initial values for the request
|
||||
* @returns The response body interpreted as JSON
|
||||
*/
|
||||
export async function requestAPI<T>(
|
||||
endPoint = '',
|
||||
init: RequestInit = {}
|
||||
): Promise<T> {
|
||||
// Make request to Jupyter API
|
||||
const settings = ServerConnection.makeSettings();
|
||||
const requestUrl = URLExt.join(
|
||||
settings.baseUrl,
|
||||
'jupyterlab-optuna', // API Namespace
|
||||
endPoint
|
||||
);
|
||||
|
||||
let response: Response;
|
||||
try {
|
||||
response = await ServerConnection.makeRequest(requestUrl, init, settings);
|
||||
} catch (error) {
|
||||
throw new ServerConnection.NetworkError(error as any);
|
||||
}
|
||||
|
||||
let data: any = await response.text();
|
||||
|
||||
if (data.length > 0) {
|
||||
try {
|
||||
data = JSON.parse(data);
|
||||
} catch (error) {
|
||||
console.log('Not a JSON response body.', response);
|
||||
}
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new ServerConnection.ResponseError(response, data.message || data);
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import {
|
||||
JupyterFrontEnd,
|
||||
JupyterFrontEndPlugin
|
||||
} from '@jupyterlab/application';
|
||||
|
||||
import { ICommandPalette } from '@jupyterlab/apputils';
|
||||
import optunaLogo from '../img/optuna_logo.svg';
|
||||
|
||||
import { ILauncher } from '@jupyterlab/launcher';
|
||||
import { LabIcon } from '@jupyterlab/ui-components';
|
||||
|
||||
import { MainAreaWidget } from '@jupyterlab/apputils';
|
||||
import { OptunaDashboardWidget } from './widget';
|
||||
|
||||
/**
|
||||
* The command IDs used by the server extension plugin.
|
||||
*/
|
||||
namespace CommandIDs {
|
||||
export const get = 'server:get-file';
|
||||
export const ui = 'server:dashboard-ui';
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialization data for the jupyterlab-optuna extension.
|
||||
*/
|
||||
const plugin: JupyterFrontEndPlugin<void> = {
|
||||
id: '@jupyterlab-examples/server-extension:plugin',
|
||||
description:
|
||||
'A minimal JupyterLab extension with backend and frontend parts.',
|
||||
autoStart: true,
|
||||
optional: [ILauncher],
|
||||
requires: [ICommandPalette],
|
||||
activate: (
|
||||
app: JupyterFrontEnd,
|
||||
palette: ICommandPalette,
|
||||
launcher: ILauncher | null
|
||||
) => {
|
||||
console.log(
|
||||
'JupyterLab extension @jupyterlab-examples/server-extension is activated!'
|
||||
);
|
||||
console.log('ICommandPalette:', palette);
|
||||
|
||||
const { commands, shell } = app;
|
||||
const optunaIcon = new LabIcon({
|
||||
name: 'ui-components:optuna',
|
||||
svgstr: optunaLogo
|
||||
});
|
||||
|
||||
commands.addCommand(CommandIDs.ui, {
|
||||
caption: 'Launch Optuna Dashboard',
|
||||
label: 'Optuna Dashboard',
|
||||
icon: args => (args['isPalette'] ? undefined : optunaIcon),
|
||||
execute: () => {
|
||||
const content = new OptunaDashboardWidget();
|
||||
const widget = new MainAreaWidget<OptunaDashboardWidget>({ content });
|
||||
widget.title.label = 'Optuna Dashboard Widget';
|
||||
widget.title.icon = optunaIcon;
|
||||
shell.add(widget, 'main');
|
||||
}
|
||||
});
|
||||
if (launcher) {
|
||||
launcher.add({
|
||||
command: CommandIDs.ui
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default plugin;
|
||||
@@ -0,0 +1,14 @@
|
||||
import { ReactWidget } from '@jupyterlab/ui-components';
|
||||
import React from 'react';
|
||||
import { JupyterLabEntrypoint } from './components/JupyterLabEntrypoint';
|
||||
|
||||
export class OptunaDashboardWidget extends ReactWidget {
|
||||
constructor() {
|
||||
super();
|
||||
this.addClass('jp-react-widget');
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
return <JupyterLabEntrypoint />;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
/*
|
||||
See the JupyterLab Developer Guide for useful CSS Patterns:
|
||||
|
||||
https://jupyterlab.readthedocs.io/en/stable/developer/css.html
|
||||
*/
|
||||
@@ -0,0 +1 @@
|
||||
@import url('base.css');
|
||||
@@ -0,0 +1 @@
|
||||
import './base.css';
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"baseUrl": ".",
|
||||
"composite": true,
|
||||
"declaration": true,
|
||||
"esModuleInterop": true,
|
||||
"incremental": true,
|
||||
"jsx": "react",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"noEmitOnError": true,
|
||||
"noImplicitAny": true,
|
||||
"noUnusedLocals": true,
|
||||
"preserveWatchOutput": true,
|
||||
"resolveJsonModule": true,
|
||||
"outDir": "lib",
|
||||
"paths": {
|
||||
"plotly.js-dist-min": ["node_modules/@types/plotly.js"]
|
||||
},
|
||||
"rootDir": "src",
|
||||
"strict": true,
|
||||
"strictNullChecks": true,
|
||||
"target": "ES2018"
|
||||
},
|
||||
"include": ["src/**/*", "src/types/**/*"]
|
||||
}
|
||||
+6785
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user