feat(xod-client): make new Helpbox works fine with Suggester and tweak mouse interaction in the Suggester

packages/xod-client/src/core/assets/icons/cross.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="6px" height="6px" viewBox="0 0 6 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <polygon stroke="none" fill="#FFFFFF" fill-rule="evenodd" points="0 0.187304929 0.187410837 0 2.99999963 2.80799181 5.81257761 0 6 0.187304929 3.18845185 2.99488896 5.99994224 5.81268295 5.81263537 5.99998788 3.00000029 3.19195041 0.18735308 6 4.62058277e-05 5.81269507 2.81148217 3.00512648"></polygon>
+</svg>

packages/xod-client/src/core/assets/icons/search.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path d="M8.57616806,7.54707664 L8.03416041,7.54707664 L7.8418456,7.36212835 C8.51452765,6.57957146 8.91922561,5.56415685 8.91922561,4.45963989 C8.9192527,1.99665076 6.92262902,0 4.45961281,0 C1.99665076,0 0,1.99665076 0,4.45963989 C0,6.92262902 1.99665076,8.9192527 4.45961281,8.9192527 C5.56421101,8.9192527 6.57959854,8.51455474 7.36212835,7.84187268 L7.54702247,8.03418749 L7.54702247,8.57624931 L10.9775439,12.0000271 L12,10.9775709 L8.57616806,7.54707664 Z M4.45961281,7.54707664 C2.75112281,7.54707664 1.37217606,6.16821114 1.37217606,4.45963989 C1.37217606,2.75109572 2.75112281,1.37220314 4.45961281,1.37220314 C6.16815697,1.37220314 7.54704956,2.75109572 7.54704956,4.45963989 C7.54702247,6.16821114 6.16815697,7.54707664 4.45961281,7.54707664 Z" stroke="none" fill="#999999" fill-rule="nonzero"></path>
+</svg>

packages/xod-client/src/core/selectors.js

@@ -30,11 +30,21 @@ export const hasUnsavedChanges = createSelector(
 //
 
 export const getPatchForHelpbox = createSelector(
-  [Project.getProject, ProjectBrowser.getSelectedPatchPath],
-  (project, selectedPatchPath) => R.compose(
-    R.chain(XP.getPatchByPath(R.__, project)),
-    Maybe
-  )(selectedPatchPath)
+  [
+    Project.getProject,
+    ProjectBrowser.getSelectedPatchPath,
+    Editor.isSuggesterVisible,
+    Editor.getSuggesterHighlightedPatchPath,
+  ],
+  (project, selectedPatchPath, suggesterVisible, suggesterPatchPath) => {
+    if (suggesterVisible && suggesterPatchPath) {
+      return XP.getPatchByPath(suggesterPatchPath, project);
+    }
+    return R.compose(
+      R.chain(XP.getPatchByPath(R.__, project)),
+      Maybe
+    )(selectedPatchPath);
+  }
 );
 export const getPatchForQuickHelp = createSelector(
   [Project.getProject, Editor.getSelection, Project.getCurrentPatchNodes],

packages/xod-client/src/core/styles/components/Helpbox.scss

@@ -1,8 +1,7 @@
 .Helpbox {
   position: fixed;
-  z-index: 5;
+  z-index: 15;
   top: 0;
-  left: $sidebar-width;
   background: $sidebar-color-bg;
   border: 1px solid $chrome-outlines;
   border-radius: 5px;

packages/xod-client/src/core/styles/components/PatchDocs.scss

@@ -77,7 +77,7 @@ $PinInfo-padding-bottom: 10px;
       overflow: hidden;
       box-sizing: border-box;
     }
-    &--no-outputs { margin-bottom: -20px; }
+    &--no-outputs { margin-bottom: -15px; }
   }
   .input-pin {
     border: 1px solid $color-pinlabel;

packages/xod-client/src/core/styles/components/Suggester.scss

@@ -1,3 +1,16 @@
+@mixin custom-search-clear-button() {
+  position: relative;
+  z-index: 10;
+  width: 18px;
+  height: 18px;
+  border: none;
+  border-radius: 50%;
+  background: transparent url('../assets/icons/cross.svg') no-repeat center center;
+  &:hover {
+    background-color: $coal-bright;
+  }
+}
+
 .Suggester {
   position: absolute;
   left: 50%;
@@ -5,7 +18,7 @@
   z-index: 10;
 
   width: 400px;
-  margin: 0 0 0 -200px;
+  margin: 0 0 0 -400px;
   box-sizing: border-box;
 
   padding: 4px;
@@ -19,9 +32,7 @@
 
   box-shadow: 0 6px 24px 2px rgba(0,0,0,.6);
 
-  &.with-helpbar {
-    margin-left: -490px;
-  }
+  &-libs {}
 
   .loading-icon {
     position: absolute;
@@ -42,12 +53,12 @@
   input {
     width: 100%;
     font-size: $font-size-xl;
-    background-color: $input-color-bg;
+    background: $input-color-bg url('../assets/icons/search.svg') no-repeat 6px 11px;
     color: $input-color-text;
     border: 1px solid $input-color-border;
     border-radius: 2px;
     box-sizing: border-box;
-    padding: 6px 4px;
+    padding: 6px 4px 6px 24px;
 
     &:focus {
       outline: none;
@@ -57,8 +68,18 @@
     &:disabled {
       opacity: 0.2;
     }
+
+    &::-ms-clear {
+      @include custom-search-clear-button();
+    }
+
+    &::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+      @include custom-search-clear-button();
+    }
   }
 
+
   &-container {
     max-height: 600px;
     cursor: default;
@@ -113,9 +134,6 @@
     &.is-highlighted {
       background: $sidebar-color-bg-selected;
     }
-    &:hover, &:focus {
-      background: $sidebar-color-bg-hover;
-    }
 
     .path {
       display: block;

packages/xod-client/src/editor/components/Suggester.jsx

@@ -1,3 +1,4 @@
+import R from 'ramda';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -9,10 +10,13 @@ import regExpEscape from 'escape-string-regexp';
 import { isAmong } from 'xod-func-tools';
 
 import { KEYCODE } from '../../utils/constants';
+import { triggerUpdateHelpboxPositionViaSuggester } from '../../editor/utils';
 import SuggesterContainer from './SuggesterContainer';
 
 const getSuggestionValue = ({ item }) => item.path;
 
+const getSuggestionIndex = R.uncurryN(2, suggestion => R.findIndex(R.equals(suggestion)));
+
 class Suggester extends React.Component {
   constructor(props) {
     super(props);
@@ -20,17 +24,27 @@ class Suggester extends React.Component {
     this.state = {
       value: '',
       suggestions: [],
+      mouseInteraction: true,
     };
 
+    // `mouseInteraction` is about can User interact with
+    // suggestions using mouse or not. It avoid bug when
+    // User scrolls suggestions using keyboard and dont
+    // touching mouse at all.
+    // It will be turned on when User moves mouse
+    // over SuggesterContainer.
+
     this.input = null;
 
     this.renderItem = this.renderItem.bind(this);
     this.onChange = this.onChange.bind(this);
+    this.onItemMouseOver = this.onItemMouseOver.bind(this);
+    this.onContainerMouseMove = this.onContainerMouseMove.bind(this);
     this.onSuggestionsFetchRequested = this.onSuggestionsFetchRequested.bind(this);
     this.onSuggestionsClearRequested = this.onSuggestionsClearRequested.bind(this);
     this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
     this.onSuggestionHighlighted = this.onSuggestionHighlighted.bind(this);
-    this.storeInputReference = this.storeInputReference.bind(this);
+    this.storeRef = this.storeRef.bind(this);
   }
 
   componentDidMount() {
@@ -38,14 +52,17 @@ class Suggester extends React.Component {
       // A hack to avoid typing "i" into input when pressing Hotkey
       setTimeout(() => {
         this.input.focus();
-        this.props.onInitialFocus();
       }, 1);
     }
   }
 
   onChange(e, { newValue, method }) {
-    if (isAmong(['up', 'down', 'click'], method)) return;
-
+    if (isAmong(['up', 'down'], method)) {
+      this.setState({
+        mouseInteraction: false,
+      });
+      return;
+    }
     this.setState({ value: newValue });
   }
 
@@ -73,10 +90,29 @@ class Suggester extends React.Component {
 
   onSuggestionHighlighted({ suggestion }) {
     if (suggestion) {
+      this.autosuggest.updateHighlightedSuggestion(
+        null,
+        getSuggestionIndex(suggestion, this.state.suggestions)
+      );
+      this.props.showHelpbox();
       this.props.onHighlight(getSuggestionValue(suggestion));
+      setTimeout(triggerUpdateHelpboxPositionViaSuggester, 1);
     }
   }
 
+  onItemMouseOver(suggestion) {
+    return () => {
+      if (this.state.mouseInteraction) {
+        this.onSuggestionHighlighted({ suggestion });
+      }
+    };
+  }
+  onContainerMouseMove() {
+    this.setState({
+      mouseInteraction: true,
+    });
+  }
+
   getSuggestions(value) {
     const { index } = this.props;
     const inputValue = value.trim().toLowerCase();
@@ -85,20 +121,27 @@ class Suggester extends React.Component {
     return index.search(regExpEscape(inputValue));
   }
 
-  storeInputReference(autosuggest) {
+  storeRef(autosuggest) {
     if (autosuggest !== null) {
+      this.autosuggest = autosuggest;
       this.input = autosuggest.input;
     }
   }
 
-  renderItem({ item }, { isHighlighted }) {
+  renderItem(suggestion, { isHighlighted }) {
     const cls = classNames('Suggester-item', {
       'is-highlighted': isHighlighted,
     });
     const value = regExpEscape(this.state.value);
+    const { item } = suggestion;
 
     return (
-      <div className={cls}>
+      <div // eslint-disable-line jsx-a11y/no-static-element-interactions
+        role="button"
+        className={cls}
+        onClick={() => this.onSelect(item.path)}
+        onMouseOver={this.onItemMouseOver(suggestion)}
+      >
         <Highlighter
           className="path"
           searchWords={[value]}
@@ -130,9 +173,9 @@ class Suggester extends React.Component {
       type: 'search',
     };
 
-    const cls = `Suggester ${this.props.addClassName}`;
+    const cls = `Suggester ${this.props.extraClassName}`;
     return (
-      <div className={cls}>
+      <div className={cls} id="Suggester">
         <Autosuggest
           suggestions={suggestions}
           value={value}
@@ -146,11 +189,15 @@ class Suggester extends React.Component {
           onSuggestionHighlighted={this.onSuggestionHighlighted}
           renderSuggestion={this.renderItem}
           renderSuggestionsContainer={({ containerProps, children }) => (
-            <SuggesterContainer containerProps={containerProps}>
+            <SuggesterContainer
+              containerProps={containerProps}
+              onScroll={triggerUpdateHelpboxPositionViaSuggester}
+              onMouseMove={this.onContainerMouseMove}
+            >
               {children}
             </SuggesterContainer>
           )}
-          ref={this.storeInputReference}
+          ref={this.storeRef}
         />
       </div>
     );
@@ -158,19 +205,18 @@ class Suggester extends React.Component {
 }
 
 Suggester.defaultProps = {
-  addClassName: '',
+  extraClassName: '',
   onBlur: () => {},
   onHighlight: () => {},
-  onInitialFocus: () => {},
 };
 
 Suggester.propTypes = {
-  addClassName: PropTypes.string,
+  extraClassName: PropTypes.string,
   index: PropTypes.object,
   onAddNode: PropTypes.func.isRequired,
   onHighlight: PropTypes.func,
   onBlur: PropTypes.func,
-  onInitialFocus: PropTypes.func,
+  showHelpbox: PropTypes.func,
 };
 
 export default Suggester;

packages/xod-client/src/editor/components/SuggesterContainer.jsx

@@ -41,13 +41,13 @@ class SuggesterContainer extends React.Component {
         const containerHeight = contentWrapper.clientHeight;
         const scrollPos = this.scrollRef.state.scrollPos;
 
-        const isOutsideUp = (top - height <= scrollPos);
-        const isOutsideDown = (top + height >= (scrollPos + containerHeight) - height);
+        const isOutsideUp = (top < scrollPos);
+        const isOutsideDown = (top + height > (scrollPos + containerHeight));
 
         if (isOutsideDown) {
-          return (top + height + height) - containerHeight;
+          return (top + height) - containerHeight;
         } else if (isOutsideUp) {
-          return top - height;
+          return top;
         }
 
         // If it’s inside container do nothing at all
@@ -72,10 +72,12 @@ class SuggesterContainer extends React.Component {
       <CustomScroll
         ref={this.setScrollRef}
         scrollTo={this.state.scrollPos}
+        onScroll={this.props.onScroll}
       >
         <div
           {...this.props.containerProps}
           className="Suggester-container"
+          onMouseMove={this.props.onMouseMove}
         >
           {this.props.children}
         </div>
@@ -84,9 +86,16 @@ class SuggesterContainer extends React.Component {
   }
 }
 
+SuggesterContainer.defaultProps = {
+  onScroll: () => {},
+  onMouseMove: () => {},
+};
+
 SuggesterContainer.propTypes = {
   containerProps: PropTypes.object,
   children: PropTypes.object,
+  onScroll: PropTypes.func,
+  onMouseMove: PropTypes.func,
 };
 
 export default SuggesterContainer;

packages/xod-client/src/editor/constants.js

@@ -97,5 +97,7 @@ export const SIDEBAR_IDS = {
 export const PANEL_CONTEXT_MENU_ID = 'PANEL_CONTEXT_MENU_ID';
 
 // Event name for pub/sub to update position of Helpbox
-// while User scrolls ProjectBrowser or selects another Patch
+// while User:
+// - scrolls ProjectBrowser or selects another Patch by click
+// - highlights (arrows/mouse over) or scrolls Node Suggester
 export const UPDATE_HELPBOX_POSITION = 'UPDATE_HELPBOX_POSITION';

packages/xod-client/src/editor/containers/Editor.jsx

@@ -48,7 +48,6 @@ class Editor extends React.Component {
     this.hideSuggester = this.hideSuggester.bind(this);
 
     this.onWorkareaFocus = this.onWorkareaFocus.bind(this);
-    this.onNodeSuggesterFocus = this.onNodeSuggesterFocus.bind(this);
     this.onLibSuggesterFocus = this.onLibSuggesterFocus.bind(this);
 
     this.patchSize = this.props.size;
@@ -75,9 +74,6 @@ class Editor extends React.Component {
   onWorkareaFocus() {
     this.props.actions.setFocusedArea(FOCUS_AREAS.WORKAREA);
   }
-  onNodeSuggesterFocus() {
-    this.props.actions.setFocusedArea(FOCUS_AREAS.NODE_SUGGESTER);
-  }
   onLibSuggesterFocus() {
     this.props.actions.setFocusedArea(FOCUS_AREAS.LIB_SUGGESTER);
   }
@@ -169,18 +165,17 @@ class Editor extends React.Component {
 
     const suggester = (this.props.suggesterIsVisible) ? (
       <Suggester
-        addClassName={(this.props.isHelpboxVisible) ? 'with-helpbar' : ''}
         index={patchesIndex}
         onAddNode={this.onAddNode}
         onBlur={this.hideSuggester}
-        onInitialFocus={this.onNodeSuggesterFocus}
         onHighlight={this.props.actions.highlightSugessterItem}
+        showHelpbox={this.props.actions.showHelpbox}
       />
     ) : null;
 
     const libSuggester = (this.props.isLibSuggesterVisible) ? (
       <LibSuggester
-        addClassName={(this.props.isHelpboxVisible) ? 'with-helpbar' : ''}
+        extraClassName="Suggester--library"
         onInstallLibrary={this.onInstallLibrary}
         onBlur={this.props.actions.hideLibSuggester}
         onInitialFocus={this.onLibSuggesterFocus}
@@ -272,6 +267,7 @@ Editor.propTypes = {
     movePanel: PropTypes.func.isRequired,
     togglePanelAutohide: PropTypes.func.isRequired,
     hideHelpbox: PropTypes.func.isRequired,
+    showHelpbox: PropTypes.func.isRequired,
   }),
 };
 
@@ -312,6 +308,7 @@ const mapDispatchToProps = dispatch => ({
     movePanel: Actions.movePanel,
     togglePanelAutohide: Actions.togglePanelAutohide,
     hideHelpbox: Actions.hideHelpbox,
+    showHelpbox: Actions.showHelpbox,
   }, dispatch),
 });
 

packages/xod-client/src/editor/containers/Helpbox.jsx

@@ -10,14 +10,17 @@ import cn from 'classnames';
 import CustomScroll from 'react-custom-scroll';
 
 import * as Actions from '../actions';
-import { isHelpboxVisible } from '../selectors';
+import { isHelpboxVisible, getFocusedArea } from '../selectors';
 import { getPatchForHelpbox } from '../../core/selectors';
 import PatchDocs from '../components/PatchDocs';
 import sanctuaryPropType from '../../utils/sanctuaryPropType';
 import CloseButton from '../../core/components/CloseButton';
 
-import { UPDATE_HELPBOX_POSITION } from '../constants';
-import { triggerUpdateHelpboxPosition } from '../utils';
+import { UPDATE_HELPBOX_POSITION, FOCUS_AREAS } from '../constants';
+import {
+  triggerUpdateHelpboxPositionViaProjectBrowser,
+  triggerUpdateHelpboxPositionViaSuggester,
+} from '../utils';
 
 class Helpbox extends React.Component {
   constructor(props) {
@@ -27,13 +30,13 @@ class Helpbox extends React.Component {
 
     this.state = {
       isVisible: true,
-      top: 50,
+      top: 0,
+      left: 0,
       pointerTop: 0,
       height: 0,
     };
 
     this.updateRef = this.updateRef.bind(this);
-    this.updatePosition = this.updatePosition.bind(this);
     this.getHelpboxOffset = this.getHelpboxOffset.bind(this);
     this.getPointerOffset = this.getPointerOffset.bind(this);
 
@@ -41,7 +44,7 @@ class Helpbox extends React.Component {
   }
   componentDidMount() {
     window.addEventListener(UPDATE_HELPBOX_POSITION, this.onUpdatePosition);
-    triggerUpdateHelpboxPosition();
+    this.triggerUpdatePosition();
   }
   componentDidUpdate(prevProps, prevState) {
     if (prevState.isVisible && !this.state.isVisible) {
@@ -49,7 +52,7 @@ class Helpbox extends React.Component {
       return;
     }
     if (prevState.height !== this.helpboxRef.clientHeight) {
-      triggerUpdateHelpboxPosition();
+      this.triggerUpdatePosition();
     }
   }
   componentWillUnmount() {
@@ -59,27 +62,40 @@ class Helpbox extends React.Component {
     this.setState({
       isVisible: event.detail.isVisible,
     });
-    this.updatePosition(event.detail.top);
-  }
-  getHelpboxOffset() {
-    return { transform: `translateY(${this.state.top}px)` };
-  }
-  getPointerOffset() {
-    return { transform: `translateY(${this.state.pointerTop}px)` };
-  }
-  updatePosition(elTop) {
+
+    const top = event.detail.top;
+    // set `right` property to `left` constant, cause
+    // `right` is a position of right side of target element,
+    // so it will be left side of helpbox
+    const left = event.detail.right;
+
     const windowHeight = window.innerHeight;
     const elHeight = this.helpboxRef.clientHeight;
-    const isFitWindow = (elTop + elHeight < windowHeight);
-    const newTop = isFitWindow ? elTop : windowHeight - elHeight;
-    const newPointer = isFitWindow ? 0 : elTop - newTop;
+    const isFitWindow = (top + elHeight < windowHeight);
+    const newTop = isFitWindow ? top : windowHeight - elHeight;
+    const newPointer = isFitWindow ? 0 : top - newTop;
 
     this.setState({
+      left,
       top: newTop,
       pointerTop: newPointer,
       height: elHeight,
     });
   }
+  getHelpboxOffset() {
+    return { transform: `translate(${this.state.left}px, ${this.state.top}px)` };
+  }
+  getPointerOffset() {
+    return { transform: `translateY(${this.state.pointerTop}px)` };
+  }
+  triggerUpdatePosition() {
+    if (this.props.focusedArea === FOCUS_AREAS.PROJECT_BROWSER) {
+      triggerUpdateHelpboxPositionViaProjectBrowser();
+    }
+    if (this.props.focusedArea === FOCUS_AREAS.NODE_SUGGESTER) {
+      triggerUpdateHelpboxPositionViaSuggester();
+    }
+  }
   updateRef(el) {
     this.helpboxRef = el;
   }
@@ -89,7 +105,8 @@ class Helpbox extends React.Component {
     const isHidden = (
       !isVisible ||
       Maybe.isNothing(maybeSelectedPatch) ||
-      !this.state.isVisible
+      !this.state.isVisible ||
+      this.state.top === 0
     );
 
     const docs = maybeSelectedPatch
@@ -108,7 +125,7 @@ class Helpbox extends React.Component {
           onClick={actions.hideHelpbox}
         />
         <div className="Helpbox-content">
-          <CustomScroll flex={1}>
+          <CustomScroll flex="1">
             {docs}
           </CustomScroll>
         </div>
@@ -120,6 +137,7 @@ class Helpbox extends React.Component {
 Helpbox.propTypes = {
   maybeSelectedPatch: sanctuaryPropType($Maybe(PatchType)),
   isVisible: PropTypes.bool,
+  focusedArea: PropTypes.oneOf(R.values(FOCUS_AREAS)),
   actions: PropTypes.shape({
     // eslint-disable-next-line react/no-unused-prop-types
     hideHelpbox: PropTypes.func.isRequired,
@@ -129,6 +147,7 @@ Helpbox.propTypes = {
 const mapStateToProps = R.applySpec({
   isVisible: isHelpboxVisible,
   maybeSelectedPatch: getPatchForHelpbox,
+  focusedArea: getFocusedArea,
 });
 const mapDispatchToProps = dispatch => ({
   actions: bindActionCreators({

packages/xod-client/src/editor/reducer.js

@@ -569,12 +569,15 @@ const editorReducer = (state = {}, action) => {
       if (R.path(['suggester', 'visible'], state) === true) return state;
 
       return R.compose(
+        R.over(R.lensProp('isHelpboxVisible'), R.T),
+        R.assoc('focusedArea', FOCUS_AREAS.NODE_SUGGESTER),
         R.assocPath(['suggester', 'visible'], true),
         R.assocPath(['suggester', 'placePosition'], action.payload)
       )(state);
     }
     case EAT.HIDE_SUGGESTER:
       return R.compose(
+        R.over(R.lensProp('isHelpboxVisible'), R.F),
         R.assocPath(['suggester', 'visible'], false),
         R.assocPath(['suggester', 'highlightedPatchPath'], null),
         R.assocPath(['suggester', 'placePosition'], null)

packages/xod-client/src/editor/utils.js

@@ -11,7 +11,11 @@ import {
   subtractPoints,
 } from '../project/nodeLayout';
 
-import { SELECTION_ENTITY_TYPE, PANEL_IDS, UPDATE_HELPBOX_POSITION } from './constants';
+import {
+  SELECTION_ENTITY_TYPE,
+  PANEL_IDS,
+  UPDATE_HELPBOX_POSITION,
+} from './constants';
 
 export const getTabByPatchPath = R.curry(
   (patchPath, tabs) => R.compose(
@@ -282,36 +286,53 @@ export const getMaximizedPanelsBySidebarId = R.compose(
   getPanelsBySidebarId
 );
 
-export const triggerUpdateHelpboxPosition = (event) => {
+const calculateHelpboxPosition = (container, item) => {
+  const scrollTop = container.scrollTop;
+  const height = container.offsetHeight;
+  const viewBottom = scrollTop + height;
+
+  const elHeight = item.offsetHeight;
+  const elTop = item.offsetTop;
+  const elBottom = elHeight + elTop;
+  const elVisible = (
+    (elBottom <= viewBottom) && elTop >= scrollTop
+  );
+  const elBox = item.getClientRects()[0];
+
+  return {
+    isVisible: elVisible,
+    top: Math.ceil(elBox.top),
+    right: Math.ceil(elBox.right),
+  };
+};
+
+export const triggerUpdateHelpboxPositionViaProjectBrowser = (event) => {
   const container = document.getElementById('ProjectBrowser').getElementsByClassName('inner-container')[0];
   const selectedElement = (event && event.type === 'click')
     ? event.target.closest('.PatchGroupItem')
     : container.getElementsByClassName('isSelected')[0];
 
   if (container && selectedElement) {
-    const scrollTop = container.scrollTop;
-    const height = container.offsetHeight;
-    const viewBottom = scrollTop + height;
-
-    const elHeight = selectedElement.offsetHeight;
-    const elTop = selectedElement.offsetTop;
-    const elBottom = elHeight + elTop;
-
-    const elVisible = (
-      (elBottom <= viewBottom) && elTop >= scrollTop
-    );
-
-    const elAbsTop = selectedElement.getClientRects()[0].top;
-
     window.dispatchEvent(
       new window.CustomEvent(
         UPDATE_HELPBOX_POSITION,
-        {
-          detail: {
-            isVisible: elVisible,
-            top: elAbsTop,
-          },
-        }
+        { detail: calculateHelpboxPosition(container, selectedElement) }
+      )
+    );
+  }
+};
+
+export const triggerUpdateHelpboxPositionViaSuggester = () => {
+  const suggester = document.getElementById('Suggester');
+  if (!suggester) return;
+  const container = suggester.getElementsByClassName('inner-container')[0];
+  const item = suggester.getElementsByClassName('is-highlighted')[0];
+
+  if (container && item) {
+    window.dispatchEvent(
+      new window.CustomEvent(
+        UPDATE_HELPBOX_POSITION,
+        { detail: calculateHelpboxPosition(container, item) }
       )
     );
   }

packages/xod-client/src/projectBrowser/containers/ProjectBrowser.jsx

@@ -37,7 +37,7 @@ import PatchGroupItemContextMenu from '../components/PatchGroupItemContextMenu';
 
 import { PATCH_GROUP_CONTEXT_MENU_ID } from '../constants';
 import { PANEL_IDS, SIDEBAR_IDS } from '../../editor/constants';
-import { triggerUpdateHelpboxPosition } from '../../editor/utils';
+import { triggerUpdateHelpboxPositionViaProjectBrowser } from '../../editor/utils';
 
 const pickPatchPartsForComparsion = R.map(R.pick(['dead', 'path']));
 
@@ -187,7 +187,7 @@ class ProjectBrowser extends React.Component {
         onBeginDrag={startDraggingPatch}
         isSelected={path === selectedPatchPath}
         onClick={(event) => {
-          triggerUpdateHelpboxPosition(event);
+          triggerUpdateHelpboxPositionViaProjectBrowser(event);
           setSelection(path);
         }}
         collectPropsFn={collectPropsFn}
@@ -308,7 +308,7 @@ class ProjectBrowser extends React.Component {
           sidebarId={this.props.sidebarId}
           autohide={this.props.autohide}
           additionalButtons={this.renderToolbarButtons()}
-          onScroll={triggerUpdateHelpboxPosition}
+          onScroll={triggerUpdateHelpboxPositionViaProjectBrowser}
         >
           {this.renderPatches()}
         </SidebarPanel>