How to use the d3-selection.mouse function in d3-selection

mouseQuadtreeSearch = function () {
              const event = mouse(this);
              const [xp, yp] = [event[0], event[1]];

              // Only highlight within 35 pixels
              let maximum_distance = x.invert(35) - x.invert(0);
              let closest = null;

              function draw_quad(quad_name) {
              // Search all the visible quadtrees for the point.
              // It may be just offscreen, alas.
              // Nonexistent tiles return nothing.
                if (!stored_tiles[quad_name]) { return false; }

                const zooml = quad_name.split(',')[0];


                const quadData = stored_tiles[quad_name].quadtree;

this.map.sel.on('click.start_reaction', () => {
        // TODO fix this hack
        if (this.direction_arrow.dragging) return
        // reload the reaction input
        var coords = {
          x: d3Mouse(node)[0],
          y: d3Mouse(node)[1]
        }
        // unselect metabolites
        this.map.deselect_nodes()
        this.map.deselect_text_labels()
        // reload the reaction input
        const hasModel = this.reload(null, coords, true)
        if (hasModel) {
          // show the dropdown
          this.showDropdown(coords)
        }
        // generate the target symbol
        this.showTarget(this.map, coords)
      })
      this.map.sel.style('cursor', 'pointer')

function highlightAndTooltip(
  hasData,
  data,
  state,
  scales,
  g,
  tooltip,
  showTooltip = true,
  showHighlight = true,
  fireClick = false
) {
  if (!hasData) {
    return;
  }
  const localCoords = d3Mouse(g.nodes()[0]);
  const hoverX = scales.x.invert(localCoords[0]);
  const selectedData = findSelectedData(data, hoverX);
  hilightData(selectedData, scales, g);
  const chartBoundingRect = g["_parents"][0].getBoundingClientRect(); // Strangely, g's own width can sometimes be far too wide.
  Tooltip.show(
    Tooltip.html(selectedData),
    tooltip,
    state.tooltipSettings,
    chartBoundingRect
  );

  if (fireClick) {
    selectedData.forEach(chartData => {
      if (chartData.onClick) {
        chartData.onClick(hoverX); // TODO also pass Y
      }

state.graph.on('mousedown', function() {
        if (d3Select(window).on('mousemove.zoomRect')!=null) // Selection already active
          return;

        const e = this;

        if (d3Mouse(e)[0]<0 || d3Mouse(e)[0]>state.graphW || d3Mouse(e)[1]<0 || d3Mouse(e)[1]>state.graphH)
          return;

        state.disableHover=true;

        const rect = state.graph.append('rect')
          .attr('class', 'chart-zoom-selection');

        const startCoords = d3Mouse(e);

        d3Select(window)
          .on('mousemove.zoomRect', function() {
            d3Event.stopPropagation();
            const newCoords = [
              Math.max(0, Math.min(state.graphW, d3Mouse(e)[0])),
              Math.max(0, Math.min(state.graphH, d3Mouse(e)[1]))
            ];
            rect.attr('x', Math.min(startCoords[0], newCoords[0]))
              .attr('y', Math.min(startCoords[1], newCoords[1]))
              .attr('width', Math.abs(newCoords[0] - startCoords[0]))
              .attr('height', Math.abs(newCoords[1] - startCoords[1]));

            state.svg.dispatch('zoomScent', { detail: {
              zoomX: [startCoords[0], newCoords[0]].sort(d3Ascending).map(state.xScale.invert),
              zoomY: [startCoords[1], newCoords[1]].sort(d3Ascending).map(d =>

isWithinCircle(node, r) {
		const mouse = d3Mouse(node);
		const element = d3Select(node);
		const prefix = this.isCirclePoint() ? "c" : "";

		let cx = +element.attr(`${prefix}x`);
		let cy = +element.attr(`${prefix}y`);

		// if node don't have cx/y or x/y attribute value
		if (!(cx || cy) && node.nodeType === 1) {
			const {x, y} = node.getBBox ? node.getBBox() : node.getBoundingClientRect();

			cx = x;
			cy = y;
		}

		return Math.sqrt(
			Math.pow(cx - mouse[0], 2) + Math.pow(cy - mouse[1], 2)

if (mousePosition.plotIndex == null ||
            mousePosition.x < 0 || mousePosition.y < 0) {
            this.pointDescription.show(false);
            return;
        }

        this.pointDescription.show(true);
        const plot = this.hps[mousePosition.plotIndex];
        const xs = this.xAxisData.invert(mousePosition.x);
        const value = plot.get(mousePosition.x);
        const group = this.groupByAxisData.bucketDescription(mousePosition.plotIndex, 40);

        const cdfPlot = this.cdfs[mousePosition.plotIndex];

        // The point description is a child of the canvas, so we use canvas coordinates
        const position = d3mouse(this.surface.getCanvas().node());
        const cdfPos = cdfPlot.getY(mousePosition.x);
        this.cdfDot.attr("cx", position[0] - this.surface.leftMargin);
        this.cdfDot.attr("cy", (1 - cdfPos) * cdfPlot.getChartHeight() + this.shape.headerHeight +
            mousePosition.plotYIndex * (this.shape.size.height + this.shape.headerHeight));
        const perc = percent(cdfPos);
        this.pointDescription.update([xs, group, makeInterval(value), perc], position[0], position[1]);
    }

.on('click', function(d, i) {
            var point = mouse(this)
            var selectedRect = select(this).node()
            var selectorLabel = 'text#' + selectedRect.id + '.textnumbers'
            var selectedLabel = select(selectorLabel).node()
            click(d, index, datum, selectedLabel, selectedRect, xScale.invert(point[0]))
          })
          .attr('class', function(d, i) {

export function cursorPos(overlay) {
  return {
    x: mouse(overlay.node())[0],
    y: mouse(overlay.node())[1]
  };
}

private addMenu(data, actions = null) {

    select('#treeMenu').select('.menu').remove();

    const menuLabels = ['Set as POI', 'Star', 'Other Option', 'Another Option'];

    const container = document.getElementById('app');
    const coordinates = mouse(container);

    const menuWidth = 90;
    const menuItemHeight = 25;
    const menuHeight = 5 + actions.length * menuItemHeight;

    const menu = select('#treeMenu')
      .append('svg')
      .attr('class', 'menu')
      .attr('height', menuHeight)
      .attr('transform', 'translate(' + (coordinates[0] + 10) + ',' + (coordinates[1] - menuHeight / 2) + ')')
      .append('g')
      .attr('transform', 'translate(10,0)');

    select('.menu')
      .select('g')
      .append('g')