<commit_before>// @flow
import React from 'react';
import GlyphStyles, { GlyphSizes, Glyph } from '../../utils/glyphs.js'
import Moment from 'react-moment';
import urlHelper from '../../utils/url.js'

type Props = {|
    projectLocation: string,
    projectUrl: string,
    projectStage: string,
    dateModified: string,
|}

class ProjectDetails extends React.PureComponent<Props, State> {
    constructor(props: Props): void {
        super(props);
        this.state = {
            projectLocation: props.projectLocation,
            projectUrl: props.projectUrl,
            projectStage: props.projectStage,
            projectOrganizationType: props.projectOrganizationType,
            dateModified: props.dateModified,
        }
    }

    render(): $React$Node {
      return(
          <React.Fragment>
          {this.state.projectLocation &&
              <div className="AboutProjects-icon-row">
                <i className={Glyph(GlyphStyles.MapMarker, GlyphSizes.LG)} />
                <p className="AboutProjects-icon-text">{this.state.projectLocation}</p>
              </div>
          }
          {this.state.projectUrl &&
              <div className="AboutProjects-icon-row">
                <i className={Glyph(GlyphStyles.Globe, GlyphSizes.LG)} />
                <p className="AboutProjects-icon-text"><a href={this.state.projectUrl} target="_blank" rel="noopener noreferrer">{urlHelper.beautify(this.state.projectUrl)}</a></p>
              </div>
          }<commit_msg>Long project urls truncated with ellipsis<commit_after>// @flow
import React from 'react';
import GlyphStyles, { GlyphSizes, Glyph } from '../../utils/glyphs.js'
import Moment from 'react-moment';
import urlHelper from '../../utils/url.js'

type Props = {|
    projectLocation: string,
    projectUrl: string,
    projectStage: string,
    dateModified: string,
|}

const projectUrlStyle = {
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
    display: "block",
    maxWidth: "250px",
}

class ProjectDetails extends React.PureComponent<Props, State> {
    constructor(props: Props): void {
        super(props);
        this.state = {
            projectLocation: props.projectLocation,
            projectUrl: props.projectUrl,
            projectStage: props.projectStage,
            projectOrganizationType: props.projectOrganizationType,
            dateModified: props.dateModified,
        }
    }

    render(): $React$Node {
      return(
          <React.Fragment>
          {this.state.projectLocation &&
              <div className="AboutProjects-icon-row">
                <i className={Glyph(GlyphStyles.MapMarker, GlyphSizes.LG)} />
                <p className="AboutProjects-icon-text">{this.state.projectLocation}</p>
              </div>
          }
          {this.state.projectUrl &&
              <div className="AboutProjects-icon-row">
                <i className={Glyph(GlyphStyles.Globe, GlyphSizes.LG)} />
                <p className="AboutProjects-icon-text"><a style={projectUrlStyle} href={this.state.projectUrl} target="_blank" rel="noopener noreferrer">{urlHelper.beautify(this.state.projectUrl)}</a></p>
              </div>
          }
{'fraction_non_alphanumeric': 0.12921348314606743, 'fraction_numerical': 0.0009363295880149813, 'mean_word_length': 2.464864864864865, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 31, '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': '1694951', 'n_tokens_mistral': 916, 'n_tokens_neox': 909, 'n_words': 170}