Add help page

src/components/TracePage/KeyboardShortcutsHelp.css

@@ -0,0 +1,24 @@
+/*
+Copyright (c) 2017 Uber Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.KeyboardShortcutsHelp kbd {
+  background: #f5f5f5;
+  border: 1px solid #e8e8e8;
+  border-bottom: 1px solid #ddd;
+  color: #000;
+  margin-right: 0.4em;
+  padding: 0.25em 0.3em;
+}

src/components/TracePage/KeyboardShortcutsHelp.js

@@ -0,0 +1,98 @@
+// @flow
+
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import { Button, Modal } from 'semantic-ui-react';
+
+import { kbdMappings } from './keyboard-shortcuts';
+
+import './KeyboardShortcutsHelp.css';
+
+const symbolConv = {
+  up: '↑',
+  right: '→',
+  down: '↓',
+  left: '←',
+  shift: '⇧',
+};
+
+const descriptions = {
+  scrollPageDown: 'Scroll down',
+  scrollPageUp: 'Scroll up',
+  scrollToNextVisibleSpan: 'Scroll to the next visible span',
+  scrollToPrevVisibleSpan: 'Scroll to the previous visible span',
+  panLeft: 'Pan left',
+  panLeftFast: 'Pan left — Large',
+  panRight: 'Pan right',
+  panRightFast: 'Pan right — Large',
+  zoomIn: 'Zoom in',
+  zoomInFast: 'Zoom in — Large',
+  zoomOut: 'Zoom out',
+  zoomOutFast: 'Zoom out — Large',
+};
+
+function convertKeys(keyConfig: string | string[]): string[][] {
+  const config = Array.isArray(keyConfig) ? keyConfig : [keyConfig];
+  return config.map(str => str.split('+').map(part => symbolConv[part] || part.toUpperCase()));
+}
+
+export default function KeyboardShortcutsHelp() {
+  const rows = [];
+  Object.keys(kbdMappings).forEach(title => {
+    const keyConfigs = convertKeys(kbdMappings[title]);
+    const configs = keyConfigs.map(config =>
+      <tr key={String(config)}>
+        <td>
+          {config.map(s =>
+            <kbd key={s}>
+              {s}
+            </kbd>
+          )}
+        </td>
+        <td>
+          {descriptions[title]}
+        </td>
+      </tr>
+    );
+    rows.push(...configs);
+  });
+  return (
+    <Modal
+      trigger={
+        <Button basic compact size="tiny">
+          <h3>⌘</h3>
+        </Button>
+      }
+    >
+      <Modal.Header>Keyboard Shortcuts</Modal.Header>
+      <Modal.Content>
+        <Modal.Description>
+          <table className="KeyboardShortcutsHelp ui celled table">
+            <thead>
+              <tr>
+                <th>Key(s)</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows}
+            </tbody>
+          </table>
+        </Modal.Description>
+      </Modal.Content>
+    </Modal>
+  );
+}

src/components/TracePage/TracePageHeader.js

@@ -16,6 +16,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Dropdown, Menu } from 'semantic-ui-react';
 
+import KeyboardShortcutsHelp from './KeyboardShortcutsHelp';
 import { formatDatetime, formatDuration } from '../../utils/date';
 
 export const HEADER_ITEMS = [
@@ -68,6 +69,9 @@ export default function TracePageHeader(props) {
           </h2>
         </div>
         <div className="inline-block mr1">
+          <KeyboardShortcutsHelp />
+        </div>
+        <div className="mr1">
           <Menu>
             <Dropdown text="View Options" className="item">
               <Dropdown.Menu>

src/components/TracePage/keyboard-shortcuts.js

@@ -42,7 +42,7 @@ export type ShortcutCallbacks = {
   zoomOutFast: CombokeysHandler,
 };
 
-const kbdMappings = {
+export const kbdMappings = {
   scrollPageDown: 's',
   scrollPageUp: 'w',
   scrollToNextVisibleSpan: 'f',