Terminology change from lock -> pin

In meetings etc the term pin is more often used.

client/app/scripts/components/app.js

@@ -9,7 +9,7 @@ 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, unlockMetric,
+import { pinNextMetric, hitEsc, unpinMetric,
   selectMetric } from '../actions/app-actions';
 import Details from './details';
 import Nodes from './nodes';
@@ -39,7 +39,7 @@ function getStateFromStores() {
     highlightedEdgeIds: AppStore.getHighlightedEdgeIds(),
     highlightedNodeIds: AppStore.getHighlightedNodeIds(),
     hostname: AppStore.getHostname(),
-    lockedMetric: AppStore.getLockedMetric(),
+    pinnedMetric: AppStore.getPinnedMetric(),
     availableCanvasMetrics: AppStore.getAvailableCanvasMetrics(),
     nodeDetails: AppStore.getNodeDetails(),
     nodes: AppStore.getNodes(),
@@ -84,11 +84,11 @@ export default class App extends React.Component {
     if (ev.keyCode === ESC_KEY_CODE) {
       hitEsc();
     } else if (ev.keyIdentifier === RIGHT_ANGLE_KEY_IDENTIFIER) {
-      lockNextMetric(-1);
+      pinNextMetric(-1);
     } else if (ev.keyIdentifier === LEFT_ANGLE_KEY_IDENTIFIER) {
-      lockNextMetric(1);
+      pinNextMetric(1);
     } else if (ev.keyCode === Q_KEY_CODE) {
-      unlockMetric();
+      unpinMetric();
       selectMetric(null);
     } else if (ev.keyCode === D_KEY_CODE) {
       toggleDebugToolbar();
@@ -144,7 +144,7 @@ export default class App extends React.Component {
             websocketClosed={this.state.websocketClosed} />
           {this.state.availableCanvasMetrics.length > 0 && <MetricSelector
             availableCanvasMetrics={this.state.availableCanvasMetrics}
-            lockedMetric={this.state.lockedMetric}
+            pinnedMetric={this.state.pinnedMetric}
             selectedMetric={this.state.selectedMetric}
             />}
           <TopologyOptions options={this.state.currentTopologyOptions}

client/app/scripts/components/metric-selector-item.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { selectMetric, lockMetric, unlockMetric } from '../actions/app-actions';
+import { selectMetric, pinMetric, unpinMetric } from '../actions/app-actions';
 
 
 export class MetricSelectorItem extends React.Component {
@@ -19,22 +19,21 @@ export class MetricSelectorItem extends React.Component {
 
   onMouseClick() {
     const k = this.props.metric.id;
-    const lockedMetric = this.props.lockedMetric;
+    const pinnedMetric = this.props.pinnedMetric;
 
-    if (k === lockedMetric) {
-      unlockMetric(k);
+    if (k === pinnedMetric) {
+      unpinMetric(k);
     } else {
-      lockMetric(k);
+      pinMetric(k);
     }
   }
 
   render() {
-    const {metric, selectedMetric, lockedMetric} = this.props;
+    const {metric, selectedMetric, pinnedMetric} = this.props;
     const id = metric.id;
-    const isLocked = (id === lockedMetric);
+    const isPinned = (id === pinnedMetric);
     const isSelected = (id === selectedMetric);
     const className = classNames('metric-selector-action', {
-      'metric-selector-action-locked': isLocked,
       'metric-selector-action-selected': isSelected
     });
 
@@ -45,7 +44,7 @@ export class MetricSelectorItem extends React.Component {
         onMouseOver={this.onMouseOver}
         onClick={this.onMouseClick}>
         {metric.label}
-        {isLocked && <span className="fa fa-thumb-tack"></span>}
+        {isPinned && <span className="fa fa-thumb-tack"></span>}
       </div>
     );
   }

client/app/scripts/components/metric-selector.js

@@ -16,7 +16,7 @@ export default class MetricSelector extends React.Component {
   }
 
   onMouseOut() {
-    selectMetric(this.props.lockedMetric);
+    selectMetric(this.props.pinnedMetric);
   }
 
   render() {