New: Loads of Backend Updates to Clients and Indexers

frontend/src/Components/Tooltip/Popover.css

@@ -1,97 +1,3 @@
-.tether {
-  z-index: 2000;
-}
-
-.popoverContainer {
-  margin: 10px 15px;
-}
-
-.popover {
-  position: relative;
-  background-color: $white;
-  box-shadow: 0 5px 10px $popoverShadowColor;
-}
-
-.arrow,
-.arrow::after {
-  position: absolute;
-  display: block;
-  width: 0;
-  height: 0;
-  border-width: 11px;
-  border-style: solid;
-  border-color: transparent;
-}
-
-.arrow::after {
-  border-width: 10px;
-  content: '';
-}
-
-.top {
-  bottom: -11px;
-  left: 50%;
-  margin-left: -11px;
-  border-top-color: $popoverArrowBorderColor;
-  border-bottom-width: 0;
-
-  &::after {
-    bottom: 1px;
-    margin-left: -10px;
-    border-top-color: $white;
-    border-bottom-width: 0;
-    content: ' ';
-  }
-}
-
-.right {
-  top: 50%;
-  left: -11px;
-  margin-top: -11px;
-  border-right-color: $popoverArrowBorderColor;
-  border-left-width: 0;
-
-  &::after {
-    bottom: -10px;
-    left: 1px;
-    border-right-color: $white;
-    border-left-width: 0;
-    content: ' ';
-  }
-}
-
-.bottom {
-  top: -11px;
-  left: 50%;
-  margin-left: -11px;
-  border-top-width: 0;
-  border-bottom-color: $popoverArrowBorderColor;
-
-  &::after {
-    top: 1px;
-    margin-left: -10px;
-    border-top-width: 0;
-    border-bottom-color: $white;
-    content: ' ';
-  }
-}
-
-.left {
-  top: 50%;
-  right: -11px;
-  margin-top: -11px;
-  border-right-width: 0;
-  border-left-color: $popoverArrowBorderColor;
-
-  &::after {
-    right: 1px;
-    bottom: -10px;
-    border-right-width: 0;
-    border-left-color: $white;
-    content: ' ';
-  }
-}
-
 .title {
   padding: 10px 20px;
   border-bottom: 1px solid $popoverTitleBorderColor;
@@ -103,3 +9,7 @@
   overflow: auto;
   padding: 10px;
 }
+
+.tooltipBody {
+  padding: 0;
+}

frontend/src/Components/Tooltip/Popover.js

@@ -1,171 +1,37 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import TetherComponent from 'react-tether';
-import classNames from 'classnames';
-import isMobileUtil from 'Utilities/isMobile';
-import { tooltipPositions } from 'Helpers/Props';
+import React from 'react';
+import Tooltip from './Tooltip';
 import styles from './Popover.css';
 
-const baseTetherOptions = {
-  skipMoveElement: true,
-  constraints: [
-    {
-      to: 'window',
-      attachment: 'together',
-      pin: true
-    }
-  ]
-};
+function Popover(props) {
+  const {
+    title,
+    body,
+    ...otherProps
+  } = props;
 
-const tetherOptions = {
-  [tooltipPositions.TOP]: {
-    ...baseTetherOptions,
-    attachment: 'bottom center',
-    targetAttachment: 'top center'
-  },
+  return (
+    <Tooltip
+      {...otherProps}
+      bodyClassName={styles.tooltipBody}
+      tooltip={
+        <div>
+          <div className={styles.title}>
+            {title}
+          </div>
 
-  [tooltipPositions.RIGHT]: {
-    ...baseTetherOptions,
-    attachment: 'middle left',
-    targetAttachment: 'middle right'
-  },
-
-  [tooltipPositions.BOTTOM]: {
-    ...baseTetherOptions,
-    attachment: 'top center',
-    targetAttachment: 'bottom center'
-  },
-
-  [tooltipPositions.LEFT]: {
-    ...baseTetherOptions,
-    attachment: 'middle right',
-    targetAttachment: 'middle left'
-  }
-};
-
-class Popover extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isOpen: false
-    };
-
-    this._closeTimeout = null;
-  }
-
-  componentWillUnmount() {
-    if (this._closeTimeout) {
-      this._closeTimeout = clearTimeout(this._closeTimeout);
-    }
-  }
-
-  //
-  // Listeners
-
-  onClick = () => {
-    if (isMobileUtil()) {
-      this.setState({ isOpen: !this.state.isOpen });
-    }
-  }
-
-  onMouseEnter = () => {
-    if (this._closeTimeout) {
-      this._closeTimeout = clearTimeout(this._closeTimeout);
-    }
-
-    this.setState({ isOpen: true });
-  }
-
-  onMouseLeave = () => {
-    this._closeTimeout = setTimeout(() => {
-      this.setState({ isOpen: false });
-    }, 100);
-  }
-
-  //
-  // Render
-
-  render() {
-    const {
-      className,
-      anchor,
-      title,
-      body,
-      position
-    } = this.props;
-
-    return (
-      <TetherComponent
-        classes={{
-          element: styles.tether
-        }}
-        {...tetherOptions[position]}
-        renderTarget={
-          (ref) => (
-            <span
-              ref={ref}
-              className={className}
-              onClick={this.onClick}
-              onMouseEnter={this.onMouseEnter}
-              onMouseLeave={this.onMouseLeave}
-            >
-              {anchor}
-            </span>
-          )
-        }
-        renderElement={
-          (ref) => {
-            if (!this.state.isOpen) {
-              return null;
-            }
-
-            return (
-              <div
-                ref={ref}
-                className={styles.popoverContainer}
-                onMouseEnter={this.onMouseEnter}
-                onMouseLeave={this.onMouseLeave}
-              >
-                <div className={styles.popover}>
-                  <div
-                    className={classNames(
-                      styles.arrow,
-                      styles[position]
-                    )}
-                  />
-
-                  <div className={styles.title}>
-                    {title}
-                  </div>
-
-                  <div className={styles.body}>
-                    {body}
-                  </div>
-                </div>
-              </div>
-            );
-          }
-        }
-      />
-    );
-  }
+          <div className={styles.body}>
+            {body}
+          </div>
+        </div>
+      }
+    />
+  );
 }
 
 Popover.propTypes = {
-  className: PropTypes.string,
-  anchor: PropTypes.node.isRequired,
   title: PropTypes.string.isRequired,
-  body: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-  position: PropTypes.oneOf(tooltipPositions.all)
-};
-
-Popover.defaultProps = {
-  position: tooltipPositions.TOP
+  body: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
 };
 
 export default Popover;

frontend/src/Components/Tooltip/Tooltip.css

@@ -1,8 +1,5 @@
-.tether {
-  z-index: 2000;
-}
-
 .tooltipContainer {
+  z-index: $popperZIndex;
   margin: 10px 15px;
 }
 

frontend/src/Components/Tooltip/Tooltip.js

@@ -1,48 +1,12 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import TetherComponent from 'react-tether';
+import { Manager, Popper, Reference } from 'react-popper';
 import classNames from 'classnames';
 import isMobileUtil from 'Utilities/isMobile';
 import { kinds, tooltipPositions } from 'Helpers/Props';
+import Portal from 'Components/Portal';
 import styles from './Tooltip.css';
 
-const baseTetherOptions = {
-  skipMoveElement: true,
-  constraints: [
-    {
-      to: 'window',
-      attachment: 'together',
-      pin: true
-    }
-  ]
-};
-
-const tetherOptions = {
-  [tooltipPositions.TOP]: {
-    ...baseTetherOptions,
-    attachment: 'bottom center',
-    targetAttachment: 'top center'
-  },
-
-  [tooltipPositions.RIGHT]: {
-    ...baseTetherOptions,
-    attachment: 'middle left',
-    targetAttachment: 'middle right'
-  },
-
-  [tooltipPositions.BOTTOM]: {
-    ...baseTetherOptions,
-    attachment: 'top center',
-    targetAttachment: 'bottom center'
-  },
-
-  [tooltipPositions.LEFT]: {
-    ...baseTetherOptions,
-    attachment: 'middle right',
-    targetAttachment: 'middle left'
-  }
-};
-
 class Tooltip extends Component {
 
   //
@@ -51,11 +15,18 @@ class Tooltip extends Component {
   constructor(props, context) {
     super(props, context);
 
+    this._scheduleUpdate = null;
+    this._closeTimeout = null;
+
     this.state = {
       isOpen: false
     };
+  }
 
-    this._closeTimeout = null;
+  componentDidUpdate() {
+    if (this._scheduleUpdate && this.state.isOpen) {
+      this._scheduleUpdate();
+    }
   }
 
   componentWillUnmount() {
@@ -64,9 +35,40 @@ class Tooltip extends Component {
     }
   }
 
+  //
+  // Control
+
+  computeMaxSize = (data) => {
+    const {
+      top,
+      right,
+      bottom,
+      left
+    } = data.offsets.reference;
+
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+
+    if ((/^top/).test(data.placement)) {
+      data.styles.maxHeight = top - 20;
+    } else if ((/^bottom/).test(data.placement)) {
+      data.styles.maxHeight = windowHeight - bottom - 20;
+    } else if ((/^right/).test(data.placement)) {
+      data.styles.maxWidth = windowWidth - right - 30;
+    } else {
+      data.styles.maxWidth = left - 30;
+    }
+
+    return data;
+  }
+
   //
   // Listeners
 
+  onMeasure = ({ width }) => {
+    this.setState({ width });
+  }
+
   onClick = () => {
     if (isMobileUtil()) {
       this.setState({ isOpen: !this.state.isOpen });
@@ -93,20 +95,18 @@ class Tooltip extends Component {
   render() {
     const {
       className,
+      bodyClassName,
       anchor,
       tooltip,
       kind,
-      position
+      position,
+      canFlip
     } = this.props;
 
     return (
-      <TetherComponent
-        classes={{
-          element: styles.tether
-        }}
-        {...tetherOptions[position]}
-        renderTarget={
-          (ref) => (
+      <Manager>
+        <Reference>
+          {({ ref }) => (
             <span
               ref={ref}
               className={className}
@@ -116,59 +116,91 @@ class Tooltip extends Component {
             >
               {anchor}
             </span>
-          )
-        }
-        renderElement={
-          (ref) => {
-            if (!this.state.isOpen) {
-              return;
-            }
+          )}
+        </Reference>
 
-            return (
-              <div
-                ref={ref}
-                className={styles.tooltipContainer}
-                onMouseEnter={this.onMouseEnter}
-                onMouseLeave={this.onMouseLeave}
-              >
+        <Portal>
+          <Popper
+            placement={position}
+            // Disable events to improve performance when many tooltips
+            // are shown (Quality Definitions for example).
+            eventsEnabled={false}
+            modifiers={{
+              computeMaxHeight: {
+                order: 851,
+                enabled: true,
+                fn: this.computeMaxSize
+              },
+              preventOverflow: {
+              // Fixes positioning for tooltips in the queue
+              // and likely others.
+                escapeWithReference: true
+              },
+              flip: {
+                enabled: canFlip
+              }
+            }}
+          >
+            {({ ref, style, placement, scheduleUpdate }) => {
+              this._scheduleUpdate = scheduleUpdate;
+
+              return (
                 <div
-                  className={classNames(
-                    styles.tooltip,
-                    styles[kind]
-                  )}
+                  ref={ref}
+                  className={styles.tooltipContainer}
+                  style={style}
+                  onMouseEnter={this.onMouseEnter}
+                  onMouseLeave={this.onMouseLeave}
                 >
-                  <div
-                    className={classNames(
-                      styles.arrow,
-                      styles[kind],
-                      styles[position]
-                    )}
-                  />
+                  {
+                    this.state.isOpen ?
+                      <div
+                        className={classNames(
+                          styles.tooltip,
+                          styles[kind]
+                        )}
+                      >
+                        <div
+                          className={classNames(
+                            styles.arrow,
+                            styles[kind],
+                            styles[placement.split('-')[0]]
+                          )}
+                        />
 
-                  <div className={styles.body}>
-                    {tooltip}
-                  </div>
+                        <div
+                          className={bodyClassName}
+                        >
+                          {tooltip}
+                        </div>
+                      </div> :
+                      null
+                  }
                 </div>
-              </div>
-            );
-          }
-        }
-      />
+              );
+            }}
+          </Popper>
+        </Portal>
+      </Manager>
     );
   }
 }
 
 Tooltip.propTypes = {
   className: PropTypes.string,
+  bodyClassName: PropTypes.string.isRequired,
   anchor: PropTypes.node.isRequired,
   tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
   kind: PropTypes.oneOf([kinds.DEFAULT, kinds.INVERSE]),
-  position: PropTypes.oneOf(tooltipPositions.all)
+  position: PropTypes.oneOf(tooltipPositions.all),
+  canFlip: PropTypes.bool.isRequired
 };
 
 Tooltip.defaultProps = {
+  bodyClassName: styles.body,
   kind: kinds.DEFAULT,
-  position: tooltipPositions.TOP
+  position: tooltipPositions.TOP,
+  canFlip: true
 };
 
 export default Tooltip;