Problem with Mouse Interaction with Two EventDrops in a UI

[malishahi]

Hi,
I am using two EventDrops in one UI component. I am wondering if this works.
I have this problem that only one of the EventDrops is interactive with mouse interactions, the other does not respond. Some pieces of the code are as the following: any suggestion?

`
render() {
const t = this.props.t;

    return (
        <Panel title={t('Schedule and Timeline')} >
            <EventTimeline height={500} margin={{ left: 40, right: 5, top: 5, bottom: 20 }} data={this.state.recommendationsData} tooltipSpec={this.state.tooltipSpecRec} />
            <EventTimeline height={500} data={this.state.eventsData} tooltipSpec={this.state.tooltipSpecEvent} />
        </Panel>
    );
}`

This is my eventtime line component based on eventdrops:

createEventTimeline() {
      const data = this.props.data;
      const tooltipSpec = this.props.tooltipSpec;

      /*const tooltip = d3
          .select('body')
          .append('div')
          .classed('tooltip', true)
          .style('opacity', 0);
      const tooltip = 
          */

      this.tooltipNode
          .classed('tooltip', true)
          .style('opacity', 0);

      const chart = eventDrops({
          d3,
          zoom: {
              onZoomEnd: () => { }, //updateCommitsInformation(chart),
          },
          height: '800',
          line: (line, index) => index % 2 ? 'lavenderBlush' : 'papayaWhip',
          drop: {
              date: d => new Date(d.date),
              onMouseOver: event => {
                  this.tooltipNode
                      .transition()
                      .duration(200)
                      .style('opacity', 0.8);

                  let tooltipContent = '<div class="content">';

                  for (const key in tooltipSpec) {
                      tooltipContent = tooltipContent.concat(`<p class="message">${tooltipSpec[key]} ${event[key]}</p>`);
                  }

                  tooltipContent = tooltipContent.concat('</div>');

                  this.tooltipNode
                      .html(tooltipContent)
                      .style('left', `${d3.event.pageX - 30}px`)
                      .style('top', `${d3.event.pageY + 20}px`);
              },
              onMouseOut: () => {
                  this.tooltipNode
                      .transition()
                      .duration(500)
                      .style('opacity', 0);
              },
          },
      });

      //d3.select('#eventdrops-demo')
      this.eventElem
          .data([data])
          .call(chart);
  }

  render() {
      const t = this.props.t;

      return (
          <div ref={node => this.containerNode = node} height={this.props.height} width="100%">
              <div ref={node => this.eventElem = d3.select(node)} />
              <div ref={node => this.tooltipNode = d3.select(node)} />
          </div>
      );

[jpetitcolas]

This issue may have been fixed in the 1.0.1 release (published a few minutes ago), thanks to the #212 PR. Can you give it a try?

[malishahi]

Worked for me @jpetitcolas .
Another problem I am facing is about the position of tooltips when I have two event-drops component in a page. Tooltips got rendered far from the real drop.

[jpetitcolas]

Well, tooltips are not handled by event-drops directly. I guess you need to handle window.scrollX and window.scrollY in your code too? As this is not an event-drops issue, I invite you to open a question on StackOverflow? :)