<commit_before>// @flow
import * as React from "react";
import scrollIntoViewIfNeeded from "scroll-into-view-if-needed";
import classNames from "classnames";
import Store from "oxalis/store";
import { setActiveNodeAction } from "oxalis/model/actions/skeletontracing_actions";
import type { CommentType } from "oxalis/store";

type Props = {
  isActive: boolean,
  data: CommentType,
};

class Comment extends React.PureComponent<Props> {
  comment: ?HTMLLIElement;

  componentDidUpdate() {
    this.ensureVisible();
  }

  handleClick = () => {
    Store.dispatch(setActiveNodeAction(this.props.data.nodeId));
  };

  ensureVisible() {
    if (this.props.isActive) {
      // use polyfill as so far only chrome supports this functionality
      scrollIntoViewIfNeeded(this.comment);
    }
  }

  render() {
    const liClassName = classNames({ bold: this.props.isActive });
    const iClassName = classNames("fa", "fa-fw", {
      "fa-angle-right": this.props.isActive,
    });

    const { data } = this.props;
    return (
      <li
        className={liClassName}
        id={`comment-tab-node-${data.nodeId}`}
        ref={ref => {
          this.comment = ref;
        }}
      >
        <i className={iClassName} />
        <a href="#jump-to-comment" onClick={this.handleClick}>
          {`${data.nodeId} - ${data.content}`}
        </a>
      </li>
    );
  }
}

export default Comment;
<commit_msg>fixed navigation warning when clicking on comments #2169<commit_after>// @flow
import * as React from "react";
import scrollIntoViewIfNeeded from "scroll-into-view-if-needed";
import classNames from "classnames";
import Store from "oxalis/store";
import { setActiveNodeAction } from "oxalis/model/actions/skeletontracing_actions";
import type { CommentType } from "oxalis/store";

type Props = {
  isActive: boolean,
  data: CommentType,
};

class Comment extends React.PureComponent<Props> {
  comment: ?HTMLLIElement;

  componentDidUpdate() {
    this.ensureVisible();
  }

  handleClick = () => {
    Store.dispatch(setActiveNodeAction(this.props.data.nodeId));
  };

  ensureVisible() {
    if (this.props.isActive) {
      // use polyfill as so far only chrome supports this functionality
      scrollIntoViewIfNeeded(this.comment);
    }
  }

  render() {
    const liClassName = classNames({ bold: this.props.isActive });
    const iClassName = classNames("fa", "fa-fw", {
      "fa-angle-right": this.props.isActive,
    });

    const { data } = this.props;
    return (
      <li
        className={liClassName}
        id={`comment-tab-node-${data.nodeId}`}
        ref={ref => {
          this.comment = ref;
        }}
      >
        <i className={iClassName} />
        <a onClick={this.handleClick}>{`${data.nodeId} - ${data.content}`}</a>
      </li>
    );
  }
}

export default Comment;

{'fraction_non_alphanumeric': 0.14174067495559503, 'fraction_numerical': 0.0014209591474245115, 'mean_word_length': 3.0056899004267423, 'pattern_counts': {'":': 2, '<': 15, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6000654', 'n_tokens_mistral': 888, 'n_tokens_neox': 880, 'n_words': 188}