Merge pull request #762 from fedspendingtransparency/staging

Promote staging to master

package.json

@@ -84,7 +84,7 @@
     "js-cookie": "^2.1.0",
     "js-search": "^1.4.2",
     "lodash": "^4.6.1",
-    "mapbox-gl": "^0.41.0",
+    "mapbox-gl": "^0.44.2",
     "moment": "2.19.3",
     "moment-timezone": "^0.5.4",
     "mousetrap": "^1.6.1",
@@ -99,7 +99,6 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-custom-scrollbars": "^4.1.2",
     "react-day-picker": "^7.0.2",
-    "react-dnd": "^2.4.0",
     "react-dnd-html5-backend": "^2.4.1",
     "react-dom": "15.6.1",
     "react-helmet": "^5.0.0",

src/_scss/pages/search/results/_subawardToggle.scss

@@ -0,0 +1,40 @@
+.subaward-toggle {
+    @include button-unstyled;
+    @include display(flex);
+    @include justify-content(flex-end);
+    @include align-items(center);
+    color: $color-base;
+    padding: 0 rem(2);
+
+    .subaward-toggle__label {
+        font-size: $small-font-size;
+        color: #494E58;
+        // use a 2px offset to deal with the text width difference due to bold vs not bold text
+        margin: 0 0 0 2px;
+        &:first-child {
+            margin: 0 2px 0 0;
+        }
+
+        &.subaward-toggle__label_active {
+            font-weight: $font-semibold;
+            margin: 0;
+        }
+    }
+}
+
+.subaward-switch {
+    margin: 0 rem(12);
+    .subaward-switch__track {
+        fill: #0074BE;
+        box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.31), 0 2px 2px 0 rgba(0,0,0,0.5);
+        @include transition(fill 200ms);
+    }
+
+    .subaward-switch__switch {
+        @include transition(transform 200ms);
+    }
+
+    .subaward-switch__switch-fill {
+        fill: #FFFFFF;
+    }
+}

src/_scss/pages/search/results/_tabs.scss

@@ -6,10 +6,6 @@
         margin-top: 0;
     }
 
-    .visualization-tab-wrapper {
-        position: relative;
-    }
-
     .visualization-content-wrapper {
         position: relative;
         // position the tabs 5px higher than default in order to cover up the border radius and
@@ -18,7 +14,23 @@
     }
 
 }
+
 .visualization-tabs {
+    position: relative;
+    @include display(flex);
+    @include justify-content(space-between);
+    @include align-items(flex-end);
+}
+
+.visualization-tabs__toggle {
+    @include flex(0 0 auto);
+    @include align-self(center);
+
+    @import './_subawardToggle';
+}
+
+.visualization-tabs__list {
+    @include flex(1 1 auto);
     @include unstyled-list;
 
     @include display(flex);

src/index.html

@@ -26,7 +26,7 @@
 
     <title>USAspending.gov</title>
     <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css %>" />
-    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.css" rel="stylesheet" />
+    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css" rel="stylesheet" />
     <link rel="shortcut icon" href="img/favicon.ico">
 
     <script async type="text/javascript" id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=TREAS&subagency=FS"></script>

src/js/components/award/table/cells/FinSysAccountCell.jsx

@@ -38,7 +38,7 @@ export default class FinSysAccountCell extends React.Component {
         }
 
         return (
-            <div className={`financial-system-generic-cell column-${this.props.column} ${rowClass}`}>
+            <div className={`financial-system-generic-cell column-${this.props.column} ${rowClass}`} title={this.props.data.title}>
                 <div className="cell-content">
                     {content}
                 </div>

src/js/components/award/table/cells/FinSysGenericCell.jsx

@@ -34,7 +34,7 @@ export default class FinSysGenericCell extends React.Component {
         }
 
         return (
-            <div className={`financial-system-generic-cell column-${this.props.column} ${rowClass}`}>
+            <div className={`financial-system-generic-cell column-${this.props.column} ${rowClass}`} title={content}>
                 <div className="cell-content">
                     {content}
                 </div>

src/js/components/award/table/cells/TransactionTableGenericCell.jsx

@@ -34,7 +34,7 @@ export default class TransactionTableGenericCell extends React.Component {
         }
 
         return (
-            <div className={`transaction-generic-cell ${rowClass}`}>
+            <div className={`transaction-generic-cell ${rowClass}`} title={content}>
                 <div className="cell-content">
                     {content}
                 </div>

src/js/components/search/SearchResults.jsx

@@ -9,8 +9,7 @@ import PropTypes from 'prop-types';
 import { AddFilter } from 'components/sharedComponents/icons/Icons';
 
 import TopFilterBarContainer from 'containers/search/topFilterBar/TopFilterBarContainer';
-
-import VisualizationWrapper from './visualizations/VisualizationWrapper';
+import VisualizationWrapperContainer from 'containers/search/visualizations/VisualizationWrapperContainer';
 import MobileFilters from './mobile/MobileFilters';
 
 const propTypes = {
@@ -72,7 +71,7 @@ export default class SearchResults extends React.Component {
                 <div className="full-search-results-wrapper">
                     <TopFilterBarContainer {...this.props} />
                     <div className={`search-results ${mobileFilters}`}>
-                        <VisualizationWrapper
+                        <VisualizationWrapperContainer
                             isMobile={this.props.isMobile}
                             requestsComplete={this.props.requestsComplete}
                             noFiltersApplied={this.props.noFiltersApplied} />