Add pan and zoom to dashboard charts

Author: andrewdalpino

CHANGELOG.md

@@ -1,3 +1,7 @@
+1.0.0
+    - Add pan and zoom to dashboard charts
+    - Rename anomaly scores HTTP resource
+
 - 1.0.0-beta
     - Update to Rubix ML 1.0
 

README.md

@@ -149,7 +149,7 @@ The HTTP server exposes the following resources and their methods.
 | GET | /model | Return the properties of the model. |
 | POST | /model/predictions | Make a set of predictions on a dataset. |
 | POST | /model/probabilities | Return the joint probabilities of each sample in a dataset. |
-| POST | /model/anomaly_scores | Return the anomaly scores of each sample in a dataset. |
+| POST | /model/anomaly-scores | Return the anomaly scores of each sample in a dataset. |
 | GET | /server | Return the properties of the server. |
 | GET | /dashboard/events | Subscribe to the dashboard events stream. |
 | POST | /graphql | Query the server using GraphQL. |

assets/app.js

@@ -10,9 +10,9 @@
         "watch": "npm run dev -- --watch"
     },
     "devDependencies": {
-        "@babel/core": "^7.13.16",
-        "@babel/plugin-transform-typescript": "^7.13.0",
-        "@babel/preset-env": "^7.13.15",
+        "@babel/core": "^7.14.3",
+        "@babel/plugin-transform-typescript": "^7.14.3",
+        "@babel/preset-env": "^7.14.2",
         "@babel/preset-typescript": "^7.13.0",
         "@creativebulma/bulma-tooltip": "^1.2.0",
         "@fortawesome/fontawesome-free": "^5.15.3",
@@ -32,21 +32,21 @@
         "css-loader": "^4.3.0",
         "file-loader": "^6.1.0",
         "graphql": "^15.5.0",
-        "graphql-tag": "^2.11.0",
+        "graphql-tag": "^2.12.4",
         "ify-loader": "^1.1.0",
         "mini-css-extract-plugin": "^0.9.0",
         "moment": "^2.29.1",
         "moment-locales-webpack-plugin": "^1.2.0",
         "node-sass": "^4.14.1",
-        "optimize-css-assets-webpack-plugin": "^5.0.4",
+        "optimize-css-assets-webpack-plugin": "^5.0.6",
         "plotly.js": "^1.58.4",
-        "sass": "^1.32.11",
+        "sass": "^1.33.0",
         "sass-loader": "^9.0.3",
         "svg-url-loader": "^7.1.1",
         "typescript": "^4.2.4",
         "vue": "^2.6.12",
         "vue-apollo": "^3.0.7",
-        "vue-loader": "^15.9.6",
+        "vue-loader": "^15.9.7",
         "vue-router": "^3.5.1",
         "vue-sse": "^1.1.1",
         "vue-style-loader": "^4.1.3",

assets/app.js.gz

@@ -60,7 +60,7 @@ public function routes() : array
         }
 
         if ($this->model->isScoring()) {
-            $routes['/model/anomaly_scores'] = [
+            $routes['/model/anomaly-scores'] = [
                 'POST' => [
                     [$this, 'decompressRequestBody'],
                     [$this, 'parseRequestBody'],

package-lock.json

@@ -11,7 +11,7 @@ class ScoreRequest extends JSONRequest
      */
     public function __construct(Dataset $dataset)
     {
-        parent::__construct('POST', '/model/anomaly_scores', [
+        parent::__construct('POST', '/model/anomaly-scores', [
             'samples' => $dataset->samples(),
         ]);
     }

package.json

@@ -129,7 +129,7 @@ export default Vue.extend({
             responsive: true,
             displaylogo: false,
             modeBarButtons: [
-                ['toImage'],
+                ['zoom2d', 'pan2d', 'resetScale2d', 'toImage'],
             ],
         });
 

src/HTTP/Controllers/ModelController.php

@@ -165,7 +165,7 @@ export default Vue.extend({
             responsive: true,
             displaylogo: false,
             modeBarButtons: [
-                ['toImage'],
+                ['zoom2d', 'pan2d', 'resetScale2d', 'toImage'],
             ],
         });