<commit_before>import React from "react"
import _ from "underscore"
import resolveFrame from "../resolve-frame"
import getRootOriginAtChar from "../getRootOriginAtChar"
import whereDoesCharComeFrom from "../whereDoesCharComeFrom"
import getCodeFilePath from "./getCodeFilePath"

function getFilenameFromPath(path){
    var pathParts = path.split("/");
    var filename = _.last(pathParts);
    filename = filename.replace("?dontprocess=yes", "");
    return filename
}

export class OriginPath extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            showFullPath: false
        }
    }
    render(){
        window.originPath = this.props.originPath

        var lastOriginPathStep = _.last(this.props.originPath)
        var firstOriginPathStep = _.first(this.props.originPath)

        var inbetweenSteps = this.props.originPath.slice(1, this.props.originPath.length - 1).reverse();
        var inbetweenStepsComponents = []
        if (this.state.showFullPath){
            for (var originPathStep of inbetweenSteps) {
                inbetweenStepsComponents.push(this.getOriginPathItem(originPathStep))
            }
        }

        var lastStep = this.getOriginPathItem(lastOriginPathStep);
        var firstStep = null;
        if (this.props.originPath.length > 1) {
            firstStep = this.getOriginPathItem(firstOriginPathStep)
        }

        var showFullPathButton = null;
        if (!this.state.showFullPath && this.props.originPath.length > 2){
            showFullPathButton = <div style={{marginBottom: 20}}>
                <button
                    className="fromjs-btn-link"
                    onClick={() => this.setState({showFullPath: true})}>
                    =&gt; Show {inbetweenSteps.length} steps in-between
                </button>
            </div>
        }

        return <div>
            <div style={{marginBottom: 5}}>
                <b>Character origin</b>
            </div>
            {lastStep}
            {showFullPathButton}

            {inbetweenStepsComponents}

            {firstStep}
        </div>
    }
    getOriginPathItem(originPathStep){
        return <OriginPathItem
            key={JSON.stringify(originPathStep)}
            originPathItem={originPathStep}
            handleValueSpanClick={this.props.handleValueSpanClick}
        />
    }
}

class OriginPathItem extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            selectedFrameString: null,
            resolvedFrame: null,
            codeFilePath: null,
            showStackFrameSelector: false,
            previewFrameString: null
        }
    }
    componentDidMount(){
        var originObject = this.props.originPathItem.originObject
        if (originObject.isHTMLFileContent) {
            this.selectFrameString(getFrameFromHTMLFileContentOriginPathItem(this.props.originPathItem))
        } else {
            this.selectFrameString(_.first(originObject.stack))
        }
        this.makeSureIsResolvingFrame();
    }
    componentDidUpdate(){
        this.makeSureIsResolvingFrame();
    }
    makeSureIsResolvingFrame(){
        console.log("make sure", this.state)
        var frame = this.state.selectedFrameString
        if (frame && !this.state.resolvedFrame){
            resolveFrame(frame, (err, resolvedFrame) => {
                this.setState({resolvedFrame})

                getCodeFilePath(resolvedFrame.fileName, (codeFilePath) => {
                    this.setState({codeFilePath})
                })
            })
        }
    }
    render(){
        var originObject = this.props.originPathItem.originObject

        var filenameLink = null
        if (this.state.resolvedFrame) {
            var filename = this.state.resolvedFrame.fileName;
            var originalFilename = filename.replace("?dontprocess=yes", "");
            var filenameParts = originalFilename.split("/")
            var uiFilename  = _.last(filenameParts)

            filenameLink = <a className="origin-path-step__filename" href={this.state.codeFilepath} target="_blank">{uiFilename}</a>
        }

        var stack = null;
        var originPathItem = this.props.originPathItem;
        var previewStack = null;
        if (this.state.previewFrameString){
            previewStack = <StackFrame
                frame={this.state.previewFrameString}
                key={this.state.previewFrameString}
                originPathItem={originPathItem} />
        }
        else if (this.state.selectedFrameString) {
            stack = <StackFrame
                frame={this.state.selectedFrameString}
                key={this.state.selectedFrameString}
                originPathItem={originPathItem}
            />
        } else {
            stack = <div style={{padding: 10}}>
                (Empty stack.)
            </div>
        }

        var stackFrameSelector = null;
        if (this.state.showStackFrameSelector){
            stackFrameSelector = <StackFrameSelector
                stack={originObject.stack}
                selectedFrameString={this.state.selectedFrameString}
                onFrameSelected={(frameString) => {
                    this.selectFrameString(frameString)
                }}
                onFrameHovered={(frameString) => {
                    this.setState({previewFrameString: frameString})
                }}

            />
        }

        return <div style={{border: "1px solid #ddd", marginBottom: 20}}>
            <div >
                <div style={{background: "aliceblue"}}>
                    <span style={{
                        display: "inline-block",
                        padding: 5
                     }}>
                        <span style={{fontWeight: "bold", marginRight: 5}}>
                            {originObject.action}
                        </span>
                        &nbsp;
                        <span>
                            {filenameLink}
                        </span>
                    </span>
                    <button
                        className="fromjs-origin-path-step__stack-frame-selector-toggle"
                        onClick={() => this.setState({showStackFrameSelector: !this.state.showStackFrameSelector})}>
                        {this.state.showStackFrameSelector ? "\u25B2" : "\u25BC"}
                    </button>
                </div><commit_msg>Hide stack frame selector after selecting one.<commit_after>import React from "react"
import _ from "underscore"
import resolveFrame from "../resolve-frame"
import getRootOriginAtChar from "../getRootOriginAtChar"
import whereDoesCharComeFrom from "../whereDoesCharComeFrom"
import getCodeFilePath from "./getCodeFilePath"

function getFilenameFromPath(path){
    var pathParts = path.split("/");
    var filename = _.last(pathParts);
    filename = filename.replace("?dontprocess=yes", "");
    return filename
}

export class OriginPath extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            showFullPath: false
        }
    }
    render(){
        window.originPath = this.props.originPath

        var lastOriginPathStep = _.last(this.props.originPath)
        var firstOriginPathStep = _.first(this.props.originPath)

        var inbetweenSteps = this.props.originPath.slice(1, this.props.originPath.length - 1).reverse();
        var inbetweenStepsComponents = []
        if (this.state.showFullPath){
            for (var originPathStep of inbetweenSteps) {
                inbetweenStepsComponents.push(this.getOriginPathItem(originPathStep))
            }
        }

        var lastStep = this.getOriginPathItem(lastOriginPathStep);
        var firstStep = null;
        if (this.props.originPath.length > 1) {
            firstStep = this.getOriginPathItem(firstOriginPathStep)
        }

        var showFullPathButton = null;
        if (!this.state.showFullPath && this.props.originPath.length > 2){
            showFullPathButton = <div style={{marginBottom: 20}}>
                <button
                    className="fromjs-btn-link"
                    onClick={() => this.setState({showFullPath: true})}>
                    =&gt; Show {inbetweenSteps.length} steps in-between
                </button>
            </div>
        }

        return <div>
            <div style={{marginBottom: 5}}>
                <b>Character origin</b>
            </div>
            {lastStep}
            {showFullPathButton}

            {inbetweenStepsComponents}

            {firstStep}
        </div>
    }
    getOriginPathItem(originPathStep){
        return <OriginPathItem
            key={JSON.stringify(originPathStep)}
            originPathItem={originPathStep}
            handleValueSpanClick={this.props.handleValueSpanClick}
        />
    }
}

class OriginPathItem extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            selectedFrameString: null,
            resolvedFrame: null,
            codeFilePath: null,
            showStackFrameSelector: false,
            previewFrameString: null
        }
    }
    componentDidMount(){
        var originObject = this.props.originPathItem.originObject
        if (originObject.isHTMLFileContent) {
            this.selectFrameString(getFrameFromHTMLFileContentOriginPathItem(this.props.originPathItem))
        } else {
            this.selectFrameString(_.first(originObject.stack))
        }
        this.makeSureIsResolvingFrame();
    }
    componentDidUpdate(){
        this.makeSureIsResolvingFrame();
    }
    makeSureIsResolvingFrame(){
        console.log("make sure", this.state)
        var frame = this.state.selectedFrameString
        if (frame && !this.state.resolvedFrame){
            resolveFrame(frame, (err, resolvedFrame) => {
                this.setState({resolvedFrame})

                getCodeFilePath(resolvedFrame.fileName, (codeFilePath) => {
                    this.setState({codeFilePath})
                })
            })
        }
    }
    render(){
        var originObject = this.props.originPathItem.originObject

        var filenameLink = null
        if (this.state.resolvedFrame) {
            var filename = this.state.resolvedFrame.fileName;
            var originalFilename = filename.replace("?dontprocess=yes", "");
            var filenameParts = originalFilename.split("/")
            var uiFilename  = _.last(filenameParts)

            filenameLink = <a className="origin-path-step__filename" href={this.state.codeFilepath} target="_blank">{uiFilename}</a>
        }

        var stack = null;
        var originPathItem = this.props.originPathItem;
        var previewStack = null;
        if (this.state.previewFrameString){
            previewStack = <StackFrame
                frame={this.state.previewFrameString}
                key={this.state.previewFrameString}
                originPathItem={originPathItem} />
        }
        else if (this.state.selectedFrameString) {
            stack = <StackFrame
                frame={this.state.selectedFrameString}
                key={this.state.selectedFrameString}
                originPathItem={originPathItem}
            />
        } else {
            stack = <div style={{padding: 10}}>
                (Empty stack.)
            </div>
        }

        var stackFrameSelector = null;
        if (this.state.showStackFrameSelector){
            stackFrameSelector = <StackFrameSelector
                stack={originObject.stack}
                selectedFrameString={this.state.selectedFrameString}
                onFrameSelected={(frameString) => {
                    this.selectFrameString(frameString)
                    this.setState({showStackFrameSelector: false})
                }}
                onFrameHovered={(frameString) => {
                    this.setState({previewFrameString: frameString})
                }}

            />
        }

        return <div style={{border: "1px solid #ddd", marginBottom: 20}}>
            <div >
                <div style={{background: "aliceblue"}}>
                    <span style={{
                        display: "inline-block",
                        padding: 5
                     }}>
                        <span style={{fontWeight: "bold", marginRight: 5}}>
                            {originObject.action}
                        </span>
                        &nbsp;
                        <span>
                            {filenameLink}
                        </span>
                    </span>
                    <button
                        className="fromjs-origin-path-step__stack-frame-selector-toggle"
                        onClick={() => this.setState({showStackFrameSelector: !this.state.showStackFrameSelector})}>
                        {this.state.showStackFrameSelector ? "\u25B2" : "\u25BC"}
                    </button>
                </div>
{'fraction_non_alphanumeric': 0.10226572133168928, 'fraction_numerical': 0.002928483353884094, 'mean_word_length': 1.7640042598509051, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 79, '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': '1297839', 'n_tokens_mistral': 3308, 'n_tokens_neox': 3199, 'n_words': 567}