diff --git a/client/app/scripts/charts/node-shape-stack.js b/client/app/scripts/charts/node-shape-stack.js
index 13b6c0f58..3d691888c 100644
--- a/client/app/scripts/charts/node-shape-stack.js
+++ b/client/app/scripts/charts/node-shape-stack.js
@@ -20,7 +20,9 @@ export default function NodeShapeStack(props) {
-
+
+
+
);
}
diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index 74435858e..e4a249193 100644
--- a/client/app/scripts/components/app.js
+++ b/client/app/scripts/components/app.js
@@ -1,4 +1,5 @@
import React from 'react';
+import debug from 'debug';
import Logo from './logo';
import AppStore from '../stores/app-store';
@@ -8,7 +9,8 @@ import Status from './status.js';
import Topologies from './topologies.js';
import TopologyOptions from './topology-options.js';
import { getApiDetails, getTopologies } from '../utils/web-api-utils';
-import { lockNextMetric, hitEsc } from '../actions/app-actions';
+import { lockNextMetric, hitEsc, unlockMetric,
+ selectMetric } from '../actions/app-actions';
import Details from './details';
import Nodes from './nodes';
import MetricSelector from './metric-selector';
@@ -19,8 +21,10 @@ import { showingDebugToolbar, toggleDebugToolbar,
const ESC_KEY_CODE = 27;
const D_KEY_CODE = 68;
+const Q_KEY_CODE = 81;
const RIGHT_ANGLE_KEY_IDENTIFIER = 'U+003C';
const LEFT_ANGLE_KEY_IDENTIFIER = 'U+003E';
+const keyPressLog = debug('scope:app-key-press');
function getStateFromStores() {
return {
@@ -76,12 +80,16 @@ export default class App extends React.Component {
}
onKeyPress(ev) {
+ keyPressLog('onKeyPress', 'keyCode', ev.keyCode, ev);
if (ev.keyCode === ESC_KEY_CODE) {
hitEsc();
} else if (ev.keyIdentifier === RIGHT_ANGLE_KEY_IDENTIFIER) {
lockNextMetric(-1);
} else if (ev.keyIdentifier === LEFT_ANGLE_KEY_IDENTIFIER) {
lockNextMetric(1);
+ } else if (ev.keyCode === Q_KEY_CODE) {
+ unlockMetric();
+ selectMetric(null);
} else if (ev.keyCode === D_KEY_CODE) {
toggleDebugToolbar();
this.forceUpdate();
diff --git a/client/app/scripts/components/debug-toolbar.js b/client/app/scripts/components/debug-toolbar.js
index 60bd30c2d..2a5c3bfa9 100644
--- a/client/app/scripts/components/debug-toolbar.js
+++ b/client/app/scripts/components/debug-toolbar.js
@@ -139,6 +139,7 @@ export class DebugToolbar extends React.Component {
+
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 8aab819cf..fd33a1164 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -398,6 +398,13 @@ h2 {
.highlighted { display: inline; }
}
+ .stack .shape .metric-fill {
+ display: none;
+ }
+ .stack .onlyMetrics .shape .metric-fill {
+ display: inline-block;
+ }
+
.shape {
/* cloud paths have stroke-width set dynamically */
&:not(.shape-cloud) .border {