Experimental hiding of offscreen/overlap dashcards in fullscreen

frontend/src/dashboard/components/DashCard.jsx

@@ -21,6 +21,8 @@ export default class DashCard extends Component {
         this.state = {
             error: null
         };
+
+        _.bindAll(this, "updateVisibility");
     }
 
     static propTypes = {
@@ -34,6 +36,9 @@ export default class DashCard extends Component {
     async componentDidMount() {
         const { dashcard } = this.props;
 
+        this.visibilityTimer = window.setInterval(this.updateVisibility, 2000);
+        window.addEventListener("scroll", this.updateVisibility, false);
+
         // HACK: way to scroll to a newly added card
         if (dashcard.justAdded) {
             ReactDOM.findDOMNode(this).scrollIntoView();
@@ -52,6 +57,25 @@ export default class DashCard extends Component {
         }
     }
 
+    componentWillUnmount() {
+        window.clearInterval(this.visibilityTimer);
+        window.removeEventListener("scroll", this.updateVisibility, false);
+    }
+
+    updateVisibility() {
+        const { isFullscreen } = this.props;
+        const element = ReactDOM.findDOMNode(this);
+        if (element) {
+            const rect = element.getBoundingClientRect();
+            const isOffscreen = (rect.bottom < 0 || rect.bottom > window.innerHeight || rect.top < 0);
+            if (isFullscreen && isOffscreen) {
+                element.style.opacity = 0.05;
+            } else {
+                element.style.opacity = 1.0;
+            }
+        }
+    }
+
     renderCard(CardVisualization) {
         const { dashcard, cardData, isEditing, onAddSeries } = this.props;
         const cards = [dashcard.card].concat(dashcard.series || []);

frontend/src/dashboard/components/Dashboard.jsx

@@ -193,7 +193,7 @@ export default class Dashboard extends Component {
                                 <div className="text-normal text-grey-2">Add a question to start making it useful!</div>
                             </div>
                         :
-                            <DashboardGrid {...this.props} />
+                            <DashboardGrid {...this.props} isFullscreen={this.state.isFullscreen} />
                         }
                     </div>
                 </div>

frontend/src/dashboard/components/DashboardGrid.jsx

@@ -179,6 +179,7 @@ export default class DashboardGrid extends Component {
                             fetchCardData={this.props.fetchCardData}
                             markNewCardSeen={this.props.markNewCardSeen}
                             isEditing={isEditing}
+                            isFullscreen={this.props.isFullscreen}
                             onRemove={this.onDashCardRemove.bind(this, dc)}
                             onAddSeries={this.onDashCardAddSeries.bind(this, dc)}
                         />
@@ -210,6 +211,7 @@ export default class DashboardGrid extends Component {
                             fetchCardData={this.props.fetchCardData}
                             markNewCardSeen={this.props.markNewCardSeen}
                             isEditing={isEditing}
+                            isFullscreen={this.props.isFullscreen}
                             onRemove={this.onDashCardRemove.bind(this, dc)}
                             onAddSeries={this.onDashCardAddSeries.bind(this, dc)}
                         />