about modal

package.json

@@ -1,6 +1,6 @@
 {
   "name": "imply-pivot",
-  "version": "0.7.52",
+  "version": "0.8.0",
   "description": "A web-based exploratory visualization UI for Druid.io",
   "keywords": [
     "imply",

src/client/components/about-modal/about-modal.scss

@@ -2,7 +2,7 @@
 
 .about-modal {
   p {
-    margin-bottom: 12px;
+    margin-bottom: $form-spacing-compact;
 
     &:last-child {
       margin-bottom: 0;
@@ -12,5 +12,17 @@
   a {
     color: $brand;
     cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .button-bar {
+    padding-top: 6px;
+
+    .button-primary {
+      @extend %button-primary;
+    }
   }
 }

src/client/components/about-modal/about-modal.tsx

@@ -1,11 +1,12 @@
 require('./about-modal.css');
 
 import * as React from 'react';
-import { $, Expression, Executor, Dataset } from 'plywood';
+import { Fn } from "../../../common/utils/general/general";
+import { STRINGS } from '../../config/constants';
 import { Modal } from '../modal/modal';
 
 export interface AboutModalProps extends React.Props<any> {
-  onClose: Function;
+  onClose: Fn;
 }
 
 export interface AboutModalState {
@@ -28,14 +29,17 @@ export class AboutModal extends React.Component<AboutModalProps, AboutModalState
       onClose={onClose}
     >
       <p>
-        For feedback and support please visit the <a href="https://groups.google.com/forum/#!forum/imply-user-group">Imply User Group</a>
+        For feedback and support please visit the <a href="https://groups.google.com/forum/#!forum/imply-user-group">Imply User Group</a>.
       </p>
       <p>
-        For bug reports please create an issue on <a href="https://github.com/implydata/pivot/issues">GitHub</a>
+        For bug reports please create an issue on <a href="https://github.com/implydata/pivot/issues">GitHub</a>.
       </p>
       <p>
-        <a href="https://github.com/implydata/pivot">Pivot</a> is provided under the <a href="https://github.com/implydata/pivot/blob/master/LICENSE">Apache 2.0</a> license.
+        <a href="https://github.com/implydata/pivot">Imply Pivot</a> is released under the <a href="https://github.com/implydata/pivot/blob/master/LICENSE">Apache 2.0</a> license.
       </p>
+      <div className="button-bar">
+        <button className="button-primary" onClick={onClose}>{STRINGS.close}</button>
+      </div>
     </Modal>;
   }
 }

src/client/components/auto-refresh-menu/auto-refresh-menu.tsx

@@ -2,6 +2,7 @@ require('./auto-refresh-menu.css');
 
 import * as React from 'react';
 import { Duration } from 'chronoshift';
+import { Fn } from "../../../common/utils/general/general";
 import { Stage, DataSource } from '../../../common/models/index';
 import { STRINGS } from '../../config/constants';
 import { BubbleMenu } from '../bubble-menu/bubble-menu';
@@ -29,10 +30,10 @@ const REFRESH_DURATIONS: Duration[] = [
 
 export interface AutoRefreshMenuProps extends React.Props<any> {
   openOn: Element;
-  onClose: Function;
+  onClose: Fn;
   autoRefreshRate: Duration;
-  setAutoRefreshRate: Function;
-  refreshMaxTime: Function;
+  setAutoRefreshRate: Fn;
+  refreshMaxTime: Fn;
   dataSource: DataSource;
 }
 

src/client/components/bubble-menu/bubble-menu.tsx

@@ -1,6 +1,7 @@
 require('./bubble-menu.css');
 
 import * as React from 'react';
+import { Fn } from "../../../common/utils/general/general";
 import { Stage } from '../../../common/models/index';
 import { isInside, escapeKey, uniqueId } from '../../utils/dom/dom';
 import { BodyPortal } from '../body-portal/body-portal';
@@ -19,7 +20,7 @@ export interface BubbleMenuProps extends React.Props<any> {
   fixedSize?: boolean;
   containerStage?: Stage;
   openOn: Element;
-  onClose: Function;
+  onClose: Fn;
   inside?: Element;
   layout?: BubbleLayout;
 }

src/client/components/cube-header-bar/cube-header-bar.tsx

@@ -3,6 +3,7 @@ require('./cube-header-bar.css');
 import * as React from 'react';
 import { immutableEqual } from "immutable-class";
 import { Duration } from 'chronoshift';
+import { Fn } from "../../../common/utils/general/general";
 import { SvgIcon } from '../svg-icon/svg-icon';
 import { Clicker, Essence, DataSource, User } from "../../../common/models/index";
 
@@ -15,9 +16,9 @@ export interface CubeHeaderBarProps extends React.Props<any> {
   clicker: Clicker;
   essence: Essence;
   user?: User;
-  onNavClick: Function;
-  getUrlPrefix?: Function;
-  refreshMaxTime?: Function;
+  onNavClick: Fn;
+  getUrlPrefix?: () => string;
+  refreshMaxTime?: Fn;
 }
 
 export interface CubeHeaderBarState {

src/client/components/cube-view/cube-view.tsx

@@ -3,6 +3,7 @@ require('./cube-view.css');
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Expression } from 'plywood';
+import { Fn } from "../../../common/utils/general/general";
 import { DragManager } from '../../utils/drag-manager/drag-manager';
 import { Colors, Clicker, DataSource, Dimension, Essence, Filter, Stage, Manifest, Measure,
   SplitCombine, Splits, VisStrategy, VisualizationProps, User} from '../../../common/models/index';
@@ -23,10 +24,10 @@ export interface CubeViewProps extends React.Props<any> {
   maxSplits?: number;
   user?: User;
   hash: string;
-  updateViewHash: Function;
-  getUrlPrefix?: Function;
+  updateViewHash: (newHash: string, force?: boolean) => void;
+  getUrlPrefix?: () => string;
   dataSource: DataSource;
-  onNavClick?: Function;
+  onNavClick?: Fn;
 }
 
 export interface CubeViewState {
@@ -109,9 +110,9 @@ export class CubeView extends React.Component<CubeViewProps, CubeViewState> {
         var { essence } = this.state;
         this.setState({ essence: essence.toggleEffectiveMeasure(measure) });
       },
-      changeHighlight: (owner: string, delta: Filter) => {
+      changeHighlight: (owner: string, measure: string, delta: Filter) => {
         var { essence } = this.state;
-        this.setState({ essence: essence.changeHighlight(owner, delta) });
+        this.setState({ essence: essence.changeHighlight(owner, measure, delta) });
       },
       acceptHighlight: () => {
         var { essence } = this.state;

src/client/components/preview-menu/preview-menu.mocha.tsx → src/client/components/dimension-actions-menu/dimension-actions-menu.mocha.tsx

@@ -8,12 +8,12 @@ import '../../utils/require-extensions';
 import * as TestUtils from 'react-addons-test-utils';
 
 import { $, Expression } from 'plywood';
-import { PreviewMenu } from './preview-menu';
+import { DimensionActionsMenu } from './dimension-actions-menu';
 
-describe('PreviewMenu', () => {
+describe('DimensionActionsMenu', () => {
   it('adds the correct class', () => {
     var renderedComponent = TestUtils.renderIntoDocument(
-      <PreviewMenu
+      <DimensionActionsMenu
         clicker={null}
         containerStage={null}
         dimension={null}
@@ -27,7 +27,7 @@ describe('PreviewMenu', () => {
     );
 
     expect(TestUtils.isCompositeComponent(renderedComponent), 'should be composite').to.equal(true);
-    expect((ReactDOM.findDOMNode(renderedComponent) as any).className, 'should contain class').to.contain('preview-menu');
+    expect((ReactDOM.findDOMNode(renderedComponent) as any).className, 'should contain class').to.contain('dimension-actions-menu');
   });
 
 });

src/client/components/preview-menu/preview-menu.scss → src/client/components/dimension-actions-menu/dimension-actions-menu.scss

@@ -2,7 +2,7 @@
 
 $action-size: 50px;
 
-.preview-menu {
+.dimension-actions-menu {
   padding: 8px;
 
   .action {

src/client/components/preview-menu/preview-menu.tsx → src/client/components/dimension-actions-menu/dimension-actions-menu.tsx

@@ -1,35 +1,30 @@
-require('./preview-menu.css');
+require('./dimension-actions-menu.css');
 
-import { List } from 'immutable';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { Fn } from "../../../common/utils/general/general";
 import { SvgIcon } from '../svg-icon/svg-icon';
-import { $, Expression, Executor, Dataset } from 'plywood';
 import { STRINGS } from '../../config/constants';
 import { Stage, Clicker, Essence, VisStrategy, DataSource, Filter, Dimension, Measure, SplitCombine } from '../../../common/models/index';
 import { BubbleMenu } from '../bubble-menu/bubble-menu';
-//import { MenuHeader } from '../menu-header/menu-header';
-//import { MenuTable } from '../menu-table/menu-table';
-//import { MenuTimeSeries } from '../menu-time-series/menu-time-series';
 
 const ACTION_SIZE = 60;
 
-export interface PreviewMenuProps extends React.Props<any> {
+export interface DimensionActionsMenuProps extends React.Props<any> {
   clicker: Clicker;
   essence: Essence;
   direction: string;
   containerStage: Stage;
   openOn: Element;
   dimension: Dimension;
-  triggerFilterMenu: Function;
-  triggerSplitMenu: Function;
-  onClose: Function;
+  triggerFilterMenu: (dimension: Dimension) => void;
+  triggerSplitMenu: (dimension: Dimension) => void;
+  onClose: Fn;
 }
 
-export interface PreviewMenuState {
+export interface DimensionActionsMenuState {
 }
 
-export class PreviewMenu extends React.Component<PreviewMenuProps, PreviewMenuState> {
+export class DimensionActionsMenu extends React.Component<DimensionActionsMenuProps, DimensionActionsMenuState> {
 
   constructor() {
     super();
@@ -75,7 +70,7 @@ export class PreviewMenu extends React.Component<PreviewMenuProps, PreviewMenuSt
 
     var menuSize: Stage = Stage.fromSize(ACTION_SIZE * 2, ACTION_SIZE * 2);
     return <BubbleMenu
-      className="preview-menu"
+      className="dimension-actions-menu"
       direction={direction}
       containerStage={containerStage}
       stage={menuSize}

src/client/components/dimension-list-tile/dimension-list-tile.tsx

@@ -1,12 +1,13 @@
 require('./dimension-list-tile.css');
 
 import * as React from 'react';
-import { SvgIcon } from '../svg-icon/svg-icon';
+import { Fn } from "../../../common/utils/general/general";
 import { STRINGS, TITLE_HEIGHT, DIMENSION_HEIGHT } from '../../config/constants';
 import { DragManager } from '../../utils/drag-manager/drag-manager';
 import { findParentWithClass, setDragGhost, transformStyle, classNames } from '../../utils/dom/dom';
 import { Stage, Clicker, Essence, VisStrategy, Dimension, SplitCombine } from '../../../common/models/index';
-import { PreviewMenu } from '../preview-menu/preview-menu';
+import { SvgIcon } from '../svg-icon/svg-icon';
+import { DimensionActionsMenu } from '../dimension-actions-menu/dimension-actions-menu';
 import { TileHeader, TileHeaderIcon } from '../tile-header/tile-header';
 
 const DIMENSION_CLASS_NAME = 'dimension';
@@ -15,13 +16,13 @@ export interface DimensionListTileProps extends React.Props<any> {
   clicker: Clicker;
   essence: Essence;
   menuStage: Stage;
-  triggerFilterMenu: Function;
-  triggerSplitMenu: Function;
-  getUrlPrefix?: Function;
+  triggerFilterMenu: Fn;
+  triggerSplitMenu: Fn;
+  getUrlPrefix?: () => string;
 }
 
 export interface DimensionListTileState {
-  PreviewMenuAsync?: typeof PreviewMenu;
+  DimensionActionsMenuAsync?: typeof DimensionActionsMenu;
   menuOpenOn?: Element;
   menuDimension?: Dimension;
   highlightDimension?: Dimension;
@@ -33,19 +34,19 @@ export class DimensionListTile extends React.Component<DimensionListTileProps, D
   constructor() {
     super();
     this.state = {
-      PreviewMenuAsync: null,
+      DimensionActionsMenuAsync: null,
       menuOpenOn: null,
       menuDimension: null,
       highlightDimension: null
     };
   }
 
   componentDidMount() {
-    require.ensure(['../preview-menu/preview-menu'], (require) => {
+    require.ensure(['../dimension-actions-menu/dimension-actions-menu'], (require) => {
       this.setState({
-        PreviewMenuAsync: require('../preview-menu/preview-menu').PreviewMenu
+        DimensionActionsMenuAsync: require('../dimension-actions-menu/dimension-actions-menu').DimensionActionsMenu
       });
-    }, 'preview-menu');
+    }, 'dimension-actions-menu');
   }
 
   clickDimension(dimension: Dimension, e: MouseEvent) {
@@ -106,11 +107,11 @@ export class DimensionListTile extends React.Component<DimensionListTileProps, D
 
   renderMenu(): JSX.Element {
     var { essence, clicker, menuStage, triggerFilterMenu, triggerSplitMenu } = this.props;
-    var { PreviewMenuAsync, menuOpenOn, menuDimension } = this.state;
-    if (!PreviewMenuAsync || !menuDimension) return null;
+    var { DimensionActionsMenuAsync, menuOpenOn, menuDimension } = this.state;
+    if (!DimensionActionsMenuAsync || !menuDimension) return null;
     var onClose = this.closeMenu.bind(this);
 
-    return <PreviewMenuAsync
+    return <DimensionActionsMenuAsync
       clicker={clicker}
       essence={essence}
       direction="right"

src/client/components/dimension-measure-panel/dimension-measure-panel.tsx

@@ -1,21 +1,18 @@
 require('./dimension-measure-panel.css');
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { $, Expression, Executor, Dataset } from 'plywood';
+import { Fn } from "../../../common/utils/general/general";
 import { Stage, Clicker, Essence, DataSource, Filter, Dimension, Measure } from '../../../common/models/index';
-// import { ... } from '../../config/constants';
-// import { SvgIcon } from '../svg-icon/svg-icon';
 import { DimensionListTile } from '../dimension-list-tile/dimension-list-tile';
 import { MeasuresTile } from '../measures-tile/measures-tile';
 
 export interface DimensionMeasurePanelProps extends React.Props<any> {
   clicker: Clicker;
   essence: Essence;
   menuStage: Stage;
-  triggerFilterMenu: Function;
-  triggerSplitMenu: Function;
-  getUrlPrefix?: Function;
+  triggerFilterMenu: Fn;
+  triggerSplitMenu: Fn;
+  getUrlPrefix?: () => string;
 }
 
 export interface DimensionMeasurePanelState {

src/client/components/dimension-tile/dimension-tile.tsx

@@ -2,7 +2,7 @@ require('./dimension-tile.css');
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { SvgIcon } from '../svg-icon/svg-icon';
+import { Fn } from "../../../common/utils/general/general";
 import { $, r, Expression, Executor, Dataset, Set, SortAction } from 'plywood';
 import { SEGMENT, PIN_TITLE_HEIGHT, PIN_ITEM_HEIGHT, PIN_PADDING_BOTTOM, MAX_SEARCH_LENGTH, SEARCH_WAIT } from '../../config/constants';
 import { formatterFromData } from '../../../common/utils/formatter/formatter';
@@ -11,6 +11,7 @@ import { Clicker, Essence, VisStrategy, Dimension, SortOn, SplitCombine, Colors
 import { collect } from '../../../common/utils/general/general';
 import { DragManager } from '../../utils/drag-manager/drag-manager';
 
+import { SvgIcon } from '../svg-icon/svg-icon';
 import { TileHeader, TileHeaderIcon } from '../tile-header/tile-header';
 import { ClearableInput } from '../clearable-input/clearable-input';
 import { Checkbox } from '../checkbox/checkbox';
@@ -30,7 +31,7 @@ export interface DimensionTileProps extends React.Props<any> {
   sortOn: SortOn;
   colors?: Colors;
   onClose?: any;
-  getUrlPrefix?: Function;
+  getUrlPrefix?: () => string;
 }
 
 export interface DimensionTileState {
@@ -46,7 +47,7 @@ export interface DimensionTileState {
 
 export class DimensionTile extends React.Component<DimensionTileProps, DimensionTileState> {
   public mounted: boolean;
-  public collectTriggerSearch: Function;
+  public collectTriggerSearch: Fn;
 
   constructor() {
     super();