Refactored popup hiding logic

src/divtree/ui/c/TreeExplorer.tsx

@@ -9,7 +9,6 @@ import Page from 'model/Page';
 
 import ConfiguredTree from 'crop/ui/c/ConfiguredTree';
 import Button from '@material-ui/core/Button';
-import * as classnames from 'classnames';
 import { throttle } from 'lodash';
 import Card, { CardContent, CardHeader } from 'ui/common/Card';
 import IconButton from '@material-ui/core/IconButton';
@@ -38,9 +37,7 @@ const styles = (theme) => createStyles({
     position: 'absolute',
     backgroundColor: 'white',
     border: 'solid 2px grey',
-    // visibility: 'hidden',
-    display: 'none',
-    // display: 'flex',
+    display: 'flex',
     flexDirection: 'column',
     padding: '5px',
   },
@@ -50,10 +47,6 @@ const styles = (theme) => createStyles({
   popupTitle: {
     textAlign: 'center',
   },
-  visible: {
-    display: 'flex',
-    // visibility: 'visible',
-  },
   node: {
     position: 'absolute',
     width: 'max-content',
@@ -98,19 +91,23 @@ class NodeLabel extends React.PureComponent<any, any> {
   };
 
   private onClick = (e) => {
-    const { nodeData, clickHandler /* , expandCallback */ } = this.props;
-    if (this.state.count === 1) {
+    const { nodeData, clickHandler, expandCallback } = this.props;
+    if (this.state.count === 1) { // double click
       console.log('expand!');
       // pass click event to the node for expanding
       clearTimeout(this.timeout);
-      // expandCallback();
+      expandCallback();
       this.setState({ count: 0 });
       return;
     }
 
+    if (nodeData._collapsed) {
+      e.nativeEvent.stopImmediatePropagation();
+    }
+
     const x = e.clientX;
     const y = e.clientY;
-    e.stopPropagation(); // prevent expanding
+    e.stopPropagation(); // prevent expanding on first click
     this.setState({ count: 1 });
 
     this.timeout = setTimeout(() => {
@@ -178,16 +175,17 @@ class TreeExplorer extends React.Component<ITreeExplorerProps, any> {
       x: x - popup.getBoundingClientRect().width / 2,
       y: y - rect.getBoundingClientRect().top + this.LABEL_HEIGHT,
       popupData: { name: nodeData.name, nodeKey: nodeData.fullID },
-    });
-    console.log('custom handler!', nodeData, x, y, rect.getBoundingClientRect(), popup.getBoundingClientRect());
+    }, this.showPopup);
   };
 
   private hidePopup = () => {
-    this.setState({
-      x: 0,
-      y: 0,
-      popupData: null,
-    });
+    if (!this.popupRef.current.classList.contains('display-none')) {
+      this.popupRef.current.classList.add('display-none');
+    }
+  };
+
+  private showPopup = () => {
+    this.popupRef.current.classList.remove('display-none');
   };
 
   private throttledHide = throttle(this.hidePopup, 1000);
@@ -211,14 +209,13 @@ class TreeExplorer extends React.Component<ITreeExplorerProps, any> {
   private handleWrapperClick = (e) => {
     console.log('wrapper click!!', e.target);
     if (e.target.tagName !== 'H6' && this.state.popupData) {
-      setTimeout(this.hidePopup, 1); // prevents rerender on tree's drag start}
+      this.hidePopup();
     }
   };
 
-  // private onNodeExpand = () => {
-  //   setTimeout(this.hidePopup, 1);
-  //   // this.hidePopup();
-  // };
+  private onNodeExpand = () => {
+    this.hidePopup();
+  };
 
   private onButtonMouseDown = (e) => e.stopPropagation();
 
@@ -233,7 +230,7 @@ class TreeExplorer extends React.Component<ITreeExplorerProps, any> {
           initialZoom={ 0.25 }
           zoomable
           nodeLabelComponent={ {
-            render: <NodeLabel clickHandler={ this.handleClick } classes={ classes } /* expandCallback={ this.onNodeExpand } */ />,
+            render: <NodeLabel clickHandler={ this.handleClick } classes={ classes } expandCallback={ this.onNodeExpand } />,
             foreignObjectWrapper: {
               y: -this.LABEL_HEIGHT / 2,
               x: -10,
@@ -243,7 +240,7 @@ class TreeExplorer extends React.Component<ITreeExplorerProps, any> {
           } }
         />
         <div
-          className={ classnames({ [classes.visible]: !!popupData, [classes.popup]: true }) }
+          className={ `display-none ${classes.popup}` }
           style={ { top: y, left: x } }
           ref={ this.popupRef }
         >
@@ -257,9 +254,11 @@ class TreeExplorer extends React.Component<ITreeExplorerProps, any> {
               </>
             }
           </div>
-          <Button onClick={ this.showList } onMouseDown={ this.onButtonMouseDown }>
-            { t('divtree.public.c.treeExplorer.accessionList') }
-          </Button>
+          { popupData && popupData.nodeKey &&
+            <Button onClick={this.showList} onMouseDown={this.onButtonMouseDown}>
+              {t('divtree.public.c.treeExplorer.accessionList')}
+            </Button>
+          }
         </div>
         { accessionListIsOpen &&
           <Card className={ classes.accessionList }>
@@ -268,7 +267,7 @@ class TreeExplorer extends React.Component<ITreeExplorerProps, any> {
               title={
                 <div className={ classes.cardTitle }>
                   <div>
-                    Accession list
+                    { t('divtree.public.c.treeExplorer.accessionList') }
                   </div>
                   <div className={ classes.buttons }>
                     <IconButton onClick={ this.closeAccessionList }>

workspaces/ui-express/styles/app.styles.scss

@@ -1049,3 +1049,7 @@ h4 {
 .modal-open {
 	overflow: hidden !important;
 }
+
+.display-none {
+	display: none !important;
+}