<commit_before>import _       from "lodash/fp";
import React   from "react";
import {Table} from "react-bootstrap";

import * as actions from "../../../actions/actions.js";
import {shrinkNodeValue} from "../../../utils/utils.js";

import SortingGlyphicon from "../../glyphicons/SortingGlyphicon.jsx";

export default class extends React.Component {

    constructor(props) {
        super(props);
    }

    shrink(node) {
        return shrinkNodeValue(
            this.props.rdf.profile,
            this.props.config.shrinkNodeValues,
            node
        );
    }

    swapOrder(order) {
        return order === "asc" ? "desc" : "asc";
    }

    handleHeaderClick(column) {
        const {column: curCol, order: curOrd} = this.props.config.tableSorting;
        if (curCol === column) {
            actions.setTableSorting({column, order: this.swapOrder(curOrd)});
        } else {
            actions.setTableSorting({column, order: "asc"});
        }
    }

    handleDataClick(e) {
        actions.toggleNodeSelection([e.target.id]);
    }

    tripleSelectionStyle(tripleId) {
        if (this.props.selection.isSelectedTriple(tripleId)) {
            return {
                backgroundColor: "lightYellow",
            };
        } else {
            return {};
        }
    }

    nodeSelectionStyle(nodeId) {
        if (this.props.selection.isSelectedNode(nodeId)) {
            return {
                color: "maroon",
                fontWeight: "bold",
            };
        } else {
            return {};
        }
    }

    render() {
        const {column, order} = this.props.config.tableSorting;

        // TODO: pagination
        const rows = _([...this.props.rdf.graph])
            .orderBy([triple => this.shrink(triple[column]).toLowerCase()], [order])
            .map(triple => (
                <tr key={triple.id} style={this.tripleSelectionStyle(triple.id)}>
                    <td onClick={e => this.handleDataClick(e)} id={triple.subject.id} style={this.nodeSelectionStyle(triple.subject.id)}>{this.shrink(triple.subject)}</td>
                    <td onClick={e => this.handleDataClick(e)} id={triple.predicate.id} style={this.nodeSelectionStyle(triple.predicate.id)}>{this.shrink(triple.predicate)}</td>
                    <td onClick={e => this.handleDataClick(e)} id={triple.object.id} style={this.nodeSelectionStyle(triple.object.id)}>{this.shrink(triple.object)}</td>
                    <td style={{width: "10px"}}>o</td><commit_msg>Triples can be selected<commit_after>import _       from "lodash/fp";
import React   from "react";
import {Table} from "react-bootstrap";

import * as actions from "../../../actions/actions.js";
import {shrinkNodeValue} from "../../../utils/utils.js";

import SortingGlyphicon from "../../glyphicons/SortingGlyphicon.jsx";

export default class extends React.Component {

    constructor(props) {
        super(props);
    }

    shrink(node) {
        return shrinkNodeValue(
            this.props.rdf.profile,
            this.props.config.shrinkNodeValues,
            node
        );
    }

    swapOrder(order) {
        return order === "asc" ? "desc" : "asc";
    }

    handleHeaderClick(column) {
        const {column: curCol, order: curOrd} = this.props.config.tableSorting;
        if (curCol === column) {
            actions.setTableSorting({column, order: this.swapOrder(curOrd)});
        } else {
            actions.setTableSorting({column, order: "asc"});
        }
    }

    handleNodeClick(e) {
        actions.toggleNodeSelection([e.target.id]);
    }

    handleTripleClick(e) {
        actions.toggleTripleSelection([e.target.id]);
    }

    tripleSelectionStyle(tripleId) {
        if (this.props.selection.isSelectedTriple(tripleId)) {
            return {
                backgroundColor: "lightYellow",
            };
        } else {
            return {};
        }
    }

    nodeSelectionStyle(nodeId) {
        if (this.props.selection.isSelectedNode(nodeId)) {
            return {
                color: "maroon",
                fontWeight: "bold",
            };
        } else {
            return {};
        }
    }

    render() {
        const {column, order} = this.props.config.tableSorting;

        // TODO: pagination
        const rows = _([...this.props.rdf.graph])
            .orderBy([triple => this.shrink(triple[column]).toLowerCase()], [order])
            .map(triple => (
                <tr key={triple.id} style={this.tripleSelectionStyle(triple.id)}>
                    <td onClick={e => this.handleNodeClick(e)} id={triple.subject.id} style={this.nodeSelectionStyle(triple.subject.id)}>{this.shrink(triple.subject)}</td>
                    <td onClick={e => this.handleNodeClick(e)} id={triple.predicate.id} style={this.nodeSelectionStyle(triple.predicate.id)}>{this.shrink(triple.predicate)}</td>
                    <td onClick={e => this.handleNodeClick(e)} id={triple.object.id} style={this.nodeSelectionStyle(triple.object.id)}>{this.shrink(triple.object)}</td>
                    <td onClick={e => this.handleTripleClick(e)} id={triple.id} style={{width: "10px"}}>o</td>
{'fraction_non_alphanumeric': 0.151987529228371, 'fraction_numerical': 0.000779423226812159, 'mean_word_length': 2.18424317617866, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 32, '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': '1875733', 'n_tokens_mistral': 1571, 'n_tokens_neox': 1527, 'n_words': 237}