Remapped alt key for line-chart pan to shift (#1456)

alt collides with some linux window manager's default behavior.

Author: stephanwlee

tensorboard/components/vz_line_chart2/panZoomDragLayer.ts

@@ -44,7 +44,7 @@ export class PanZoomDragLayer extends Plottable.Components.Group {
 
     this.panZoom = new Plottable.Interactions.PanZoom(xScale, yScale);
     this.panZoom.dragInteraction().mouseFilter((event: MouseEvent) => {
-      return Boolean(event.altKey) && event.button === 0;
+      return PanZoomDragLayer.isPanKey(event) && event.button === 0;
     });
     this.panZoom.attachTo(this);
 
@@ -53,7 +53,7 @@ export class PanZoomDragLayer extends Plottable.Components.Group {
         yScale,
         unzoomMethod);
     this.dragZoomLayer.dragInteraction().mouseFilter((event: MouseEvent) => {
-      return !Boolean(event.altKey) && event.button === 0;
+      return !PanZoomDragLayer.isPanKey(event) && event.button === 0;
     });
     this.append(this.dragZoomLayer);
 
@@ -78,6 +78,10 @@ export class PanZoomDragLayer extends Plottable.Components.Group {
     });
   }
 
+  static isPanKey(event: MouseEvent): boolean {
+    return Boolean(event.shiftKey);
+  }
+
   setState(nextState: State): void {
     if (this.state == nextState) return;
     const prevState = this.state;

tensorboard/components/vz_line_chart2/vz-line-chart2.html

@@ -61,7 +61,7 @@
         cursor: crosshair;
       }
 
-      :host.altdown #chartdiv :not(.drag-zooming) .main {
+      :host.pankey #chartdiv :not(.drag-zooming) .main {
         cursor: -webkit-grab;
         cursor: grab;
       }

tensorboard/components/vz_line_chart2/vz-line-chart2.ts

@@ -293,11 +293,11 @@ Polymer({
   },
 
   _onKeyDown(event) {
-    this.toggleClass('altdown', event.altKey);
+    this.toggleClass('pankey', PanZoomDragLayer.isPanKey(event));
   },
 
   _onKeyUp(event) {
-    this.toggleClass('altdown', event.altKey);
+    this.toggleClass('pankey', PanZoomDragLayer.isPanKey(event));
   },
 
   _onMouseDown(event) {