Migrate Orion dashboard into Orion repository

.github/workflows/node.js.yml

@@ -0,0 +1,48 @@
+# Workflow to run unit tests from Github Actions.
+# Inspired from: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ master, develop ]
+  pull_request:
+    branches: [ master, develop ]
+  schedule:
+    - cron: '44 4 * * *'
+  release:
+    types: [published]
+  workflow_dispatch:
+
+defaults:
+  run:
+    working-directory: dashboard
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x, 14.x, 16.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      # Launch an orion server
+      - name: Launch Orion server
+        uses: actions/setup-python@v2
+        with:
+          python-version: 3.8
+      - run: python -m pip install git+https://github.com/notoraptor/orion.git@feature/benchmark_webapi#egg=orion[profet]
+      - run: orion serve -c ../.github/workflows/orion/orion_config.yaml &
+      # install
+      - run: yarn
+      # check files formatting using Carbon's `ci-check` script
+      - run: yarn ci-check
+      # Run all available tests
+      - run: yarn test --all --verbose

.github/workflows/orion/orion_config.yaml

@@ -0,0 +1,9 @@
+storage:
+  database:
+      host: '../.github/workflows/orion/db_dashboard_full.pkl'
+      type: 'pickleddb'
+
+gunicorn:
+   bind: '127.0.0.1:8000'
+   workers: 4
+   threads: 2

.gitignore

@@ -9,6 +9,8 @@
 *.log
 *.pkl
 *.lock
+!.github/workflows/orion/*.pkl
+!dashboard/yarn.lock
 
 # OS generated files
 .DS_Store

dashboard/.env

@@ -0,0 +1 @@
+SASS_PATH="node_modules"

dashboard/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.eslintcache
+
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

dashboard/.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-3.1.1.cjs"

dashboard/.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.1.1.cjs

dashboard/README.rst

@@ -0,0 +1,54 @@
+This code provides a common Orion dashboard to display experiments and benchmarks.
+
+Orion Dashboard is heavily based on
+`Carbon's React Tutorial <https://www.carbondesignsystem.com/developing/react-tutorial/overview>`_.
+
+===========================
+Oríon Dashboard (Prototype)
+===========================
+
+Orion Dashboard for experiments
+-------------------------------
+
+This is a very preliminary prototype of a dashboard for Oríon. Most of it are
+just place-holders and static data to show visualizations.
+
+===============================
+Dashboard for Oríon's Benchmark
+===============================
+
+Oríon's `benchmark <https://orion.readthedocs.io/en/stable/user/benchmark.html>`_ makes it easy
+to execute multiple hyperparameter optimization algorithms on several tasks. You can
+assess the average result over multiple runs of the algorithms or automatically benchmark
+how well they parallelize to large pools of workers. It quickly becomes difficult however to
+analyse all the data generated by these benchmarks, as large number of tasks and assessments can lead to
+hundreds of potential plots. It can also be challenging to track the progress of hundreds of experiments,
+each consisting of hundreds of trials. This dashboard serves as a centralized interface to visualize
+the results of the benchmarks and to monitor their progress.
+
+=============
+Installations
+=============
+
+This dashboard uses React and Carbon. You will need to install npm first, and then yarn.
+
+.. code-block:: console
+
+   npm insall --global yarn
+
+Install all dependencies including Carbon.
+
+.. code-block:: console
+
+   yarn
+
+Host
+----
+
+You can start the server with
+
+.. code-block:: console
+
+   yarn start
+
+The first time will take a few minutes while everything gets compiled. Next time will be faster.

dashboard/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "carbon-tutorial",
+  "version": "0.0.0",
+  "private": true,
+  "repository": "[email protected]:carbon-design-system/carbon-tutorial.git",
+  "bugs": "https://github.com/carbon-design-system/carbon-tutorial/issues",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "react-scripts build",
+    "ci-check": "yarn format:diff",
+    "clean": "yarn cache clean && yarn install",
+    "eject": "react-scripts eject",
+    "format": "prettier --write \"**/*.{js,md,scss}\"",
+    "format:diff": "prettier --list-different \"**/*.{js,md,scss}\"",
+    "format:staged": "prettier --write",
+    "start": "react-scripts start",
+    "test": "react-scripts test"
+  },
+  "dependencies": {
+    "@carbon/grid": "10.17.0",
+    "@carbon/icons-react": "10.22.0",
+    "apollo-boost": "0.4.2",
+    "bootstrap": "^4.6.0",
+    "carbon-components": "^10.52.0",
+    "carbon-components-react": "^7.52.0",
+    "carbon-icons": "^7.0.7",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.5",
+    "graphql": "14.3.1",
+    "plotly.js": "^2.9.0",
+    "plotly.js-cartesian-dist-min": "^2.9.0",
+    "react": "16.10.0",
+    "react-apollo": "2.5.6",
+    "react-bootstrap": "^1.4.3",
+    "react-dom": "16.10.0",
+    "react-plotly.js": "^2.5.1",
+    "react-router-dom": "5.0.0",
+    "react-scripts": "4.0.1",
+    "react-sizeme": "^2.6.12"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "7.5.2",
+    "@commitlint/config-conventional": "7.5.0",
+    "@testing-library/dom": "^8.11.3",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "jest-canvas-mock": "^2.3.1",
+    "lint-staged": "8.1.5",
+    "prettier": "1.17.0",
+    "sass": "1.29.0",
+    "wait-for-expect": "3.0.2"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "lint-staged": {
+    "*.js": [
+      "yarn format:staged",
+      "git add"
+    ],
+    "*.{scss,css}": [
+      "yarn format:staged",
+      "git add"
+    ],
+    "*.md": [
+      "yarn format:staged",
+      "git add"
+    ]
+  },
+  "prettier": {
+    "jsxBracketSameLine": true,
+    "printWidth": 80,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "packageManager": "[email protected]"
+}

dashboard/public/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Oríon Dashboard</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

dashboard/src/App.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { ExperimentsWithRouter } from './experiments/Experiments';
+import { BenchmarksWithRouter } from './benchmarks/Benchmarks';
+import { Route, Switch } from 'react-router-dom';
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    // Store selected experiment here
+    this.state = { page: null };
+    this.selectExperiments = this.selectExperiments.bind(this);
+    this.selectBenchmarks = this.selectBenchmarks.bind(this);
+  }
+  render() {
+    return (
+      <Switch>
+        <Route exact path="/" component={ExperimentsWithRouter} />
+        <Route exact path="/benchmarks" component={BenchmarksWithRouter} />
+        <Route
+          exact
+          path="/benchmarks/:page"
+          component={BenchmarksWithRouter}
+        />
+        <Route path="/:page" component={ExperimentsWithRouter} />
+      </Switch>
+    );
+  }
+  selectExperiments() {
+    this.setState({ page: 'experiments' });
+  }
+  selectBenchmarks() {
+    this.setState({ page: 'benchmarks' });
+  }
+}
+
+export default App;