<commit_before>import React, { Component, PropTypes } from "react";

import Icon from "metabase/components/Icon.jsx";

import Query from "metabase/lib/query";
import { formatBucketing } from "metabase/lib/query_time";
import { stripId } from "metabase/lib/formatting";

import cx from "classnames";

export default class FieldName extends Component {
    static propTypes = {
        field: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),
        fieldOptions: PropTypes.object.isRequired,
        customFieldOptions: PropTypes.object,
        onClick: PropTypes.func,
        removeField: PropTypes.func,
        tableMetadata: PropTypes.object.isRequired
    };

    static defaultProps = {
        className: ""
    };

    render() {
        let { field, tableMetadata, className } = this.props;
        let fieldTarget = Query.getFieldTarget(field, tableMetadata);

        let parts = [];
        // fk path
        for (let [index, fkField] of Object.entries(fieldTarget.path)) {
            parts.push(<span key={"fkName"+index}>{stripId(fkField.display_name)}</span>);
            parts.push(<span key={"fkIcon"+index} className="px1"><Icon name="connections" width="10" height="10" /></span>);
        }
        // target field itself
        parts.push(<span key="field">{fieldTarget.field.display_name}</span>);
        // datetime-field unit
        if (fieldTarget.unit != null) {
            parts.push(<span key="unit">{": " + formatBucketing(fieldTarget.unit)}</span>);
        }

        return (
            <div className="flex align-center">
                <div className={cx(className, { selected: Query.isValidField(field) })} onClick={this.props.onClick}>
                    <span className="QueryOption">{parts}</span>
                </div>
                { this.props.removeField &&
                    <a className="text-grey-2 no-decoration pr1 flex align-center" onClick={this.props.removeField}>
                        <Icon name='close' width="14px" height="14px" />
                    </a>
                }
            </div>
        );
    }
}
<commit_msg>Fix sort widget crash. Resolves #2859<commit_after>import React, { Component, PropTypes } from "react";

import Icon from "metabase/components/Icon.jsx";

import Query from "metabase/lib/query";
import { formatBucketing } from "metabase/lib/query_time";
import { stripId } from "metabase/lib/formatting";

import cx from "classnames";

export default class FieldName extends Component {
    static propTypes = {
        field: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),
        fieldOptions: PropTypes.object.isRequired,
        customFieldOptions: PropTypes.object,
        onClick: PropTypes.func,
        removeField: PropTypes.func,
        tableMetadata: PropTypes.object.isRequired
    };

    static defaultProps = {
        className: ""
    };

    render() {
        let { field, tableMetadata, className } = this.props;
        let fieldTarget = Query.getFieldTarget(field, tableMetadata);

        let parts = [];
        if (fieldTarget) {
            // fk path
            for (let [index, fkField] of Object.entries(fieldTarget.path)) {
                parts.push(<span key={"fkName"+index}>{stripId(fkField.display_name)}</span>);
                parts.push(<span key={"fkIcon"+index} className="px1"><Icon name="connections" width="10" height="10" /></span>);
            }
            // target field itself
            parts.push(<span key="field">{fieldTarget.field.display_name}</span>);
            // datetime-field unit
            if (fieldTarget.unit != null) {
                parts.push(<span key="unit">{": " + formatBucketing(fieldTarget.unit)}</span>);
            }
        } else {
            parts.push(<span key="field">field</span>);
        }

        return (
            <div className="flex align-center">
                <div className={cx(className, { selected: Query.isValidField(field) })} onClick={this.props.onClick}>
                    <span className="QueryOption">{parts}</span>
                </div>
                { this.props.removeField &&
                    <a className="text-grey-2 no-decoration pr1 flex align-center" onClick={this.props.removeField}>
                        <Icon name='close' width="14px" height="14px" />
                    </a>
                }
            </div>
        );
    }
}

{'fraction_non_alphanumeric': 0.13621867881548974, 'fraction_numerical': 0.00592255125284738, 'mean_word_length': 2.281763826606876, 'pattern_counts': {'":': 2, '<': 41, '<?xml version=': 0, '>': 41, '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': '6980347', 'n_tokens_mistral': 1236, 'n_tokens_neox': 1197, 'n_words': 246}