<commit_before>import * as ui from "../ui";
import * as csx from "csx";
import * as React from "react";
import * as tab from "./tab";
import {server,cast} from "../../socket/socketClient";
import * as commands from "../commands/commands";
import * as utils from "../../common/utils";
import * as d3 from "d3";
import {Types} from "../../socket/socketContract";
import * as $ from "jquery";
import * as styles from "../styles/styles";
import * as onresize from "onresize";
import {Clipboard} from "../clipboard";

type FileDependency = Types.FileDependency;
let EOL = '\n';

let {inputBlackStyle} = styles.Input;

/**
 * The styles
 */
require('./dependencyView.less');

import {CodeEditor} from "../codemirror/codeEditor";

export interface Props extends tab.ComponentProps {
}
export interface State {
    cycles:string[][];
}

let controlRootStyle = {
    pointerEvents:'none',
}
let controlRightStyle = {
    width:'200px',
    padding: '10px',

    overflow: 'auto',
    wordBreak: 'break-all'
}
let controlItemStyle = {
    pointerEvents:'auto',

    padding:'.4rem',
    transition:'background .2s',
    background: 'rgba(200,200,200,.05)',
    ':hover':{
        background: 'rgba(200,200,200,.25)',
    }
}
let cycleHeadingStyle = {
    fontSize:'1.2rem',
}

@ui.Radium
export class DependencyView extends ui.BaseComponent<Props, State> implements tab.Component {

    private graphRenderer: GraphRenderer;
    constructor(props: Props) {
        super(props);
        this.filePath = utils.getFilePathFromUrl(props.url);
        this.state = {
            cycles:[]
        };
    }

    refs: {
        [string: string]: any;
        root: HTMLDivElement;
        graphRoot: HTMLDivElement;
        controlRoot: HTMLDivElement;
    }

    filePath: string;
    componentDidMount() {
        this.loadData().then(()=>{
            // setup listening to resize
            this.disposible.add(onresize.on(this.graphRenderer.resize))
        });
        this.disposible.add(
            cast.activeProjectConfigDetailsUpdated.on(()=>{
                this.loadData();
            })
        );
    }

    render() {
        let hasCycles = !!this.state.cycles.length;

        let cyclesMessages = hasCycles
            ? this.state.cycles.map((cycle,i)=>{
                let cycleText = cycle.join(' ⬅️ ');
                return (
                    <div key={i} style={controlItemStyle}>
                        <div style={cycleHeadingStyle}> {i+1}) Cycle <Clipboard text={cycleText} /></div>
                        <div>
                            {cycleText}
                       </div>
                    </div>
                );
            })
            : <div key={-1} style={controlItemStyle}>No cycles 🌹</div>;

        return (
            <div
                ref="root" tabIndex={0}
                className="dependency-view"
                style={csx.extend(csx.vertical,csx.flex, csx.newLayerParent, styles.someChildWillScroll)}
                onKeyPress={this.handleKey}>
                <div ref="graphRoot" style={csx.extend(csx.vertical,csx.flex)}>
                    {/* Graph goes here */}
                </div>

                <div ref="controlRoot" className="graph-controls"
                    style={[csx.newLayer,csx.horizontalReverse,controlRootStyle]}>
                    <div style={[csx.vertical, controlRightStyle]}>
                        <div className="control-zoom" style={controlItemStyle}>
                            <a className="control-zoom-in" href="#" title="Zoom in" onClick={this.zoomIn}/>
                            <a className="control-zoom-out" href="#" title="Zoom out" onClick={this.zoomOut}/>
                            <a className="control-fit" href="#" title="Fit" onClick={this.zoomFit}/>
                        </div>
                        {cyclesMessages}
                    </div>
               </div>

               <div data-comment="Tip" style={csx.extend(styles.Tip.root,csx.content)}>
                    Tap <span style={styles.Tip.keyboardShortCutStyle}>R</span> to refresh
               </div>

            </div>
        );
    }

    handleKey = (e:any)=>{
        let unicode = e.charCode;
        if (String.fromCharCode(unicode).toLowerCase() === "r"){
            this.loadData();
        }
    }

    loadData = () => {<commit_msg>no more reverse<commit_after>import * as ui from "../ui";
import * as csx from "csx";
import * as React from "react";
import * as tab from "./tab";
import {server,cast} from "../../socket/socketClient";
import * as commands from "../commands/commands";
import * as utils from "../../common/utils";
import * as d3 from "d3";
import {Types} from "../../socket/socketContract";
import * as $ from "jquery";
import * as styles from "../styles/styles";
import * as onresize from "onresize";
import {Clipboard} from "../clipboard";

type FileDependency = Types.FileDependency;
let EOL = '\n';

let {inputBlackStyle} = styles.Input;

/**
 * The styles
 */
require('./dependencyView.less');

import {CodeEditor} from "../codemirror/codeEditor";

export interface Props extends tab.ComponentProps {
}
export interface State {
    cycles:string[][];
}

let controlRootStyle = {
    pointerEvents:'none',
}
let controlRightStyle = {
    width:'200px',
    padding: '10px',

    overflow: 'auto',
    wordBreak: 'break-all'
}
let controlItemStyle = {
    pointerEvents:'auto',

    padding:'.4rem',
    transition:'background .2s',
    background: 'rgba(200,200,200,.05)',
    ':hover':{
        background: 'rgba(200,200,200,.25)',
    }
}
let cycleHeadingStyle = {
    fontSize:'1.2rem',
}

@ui.Radium
export class DependencyView extends ui.BaseComponent<Props, State> implements tab.Component {

    private graphRenderer: GraphRenderer;
    constructor(props: Props) {
        super(props);
        this.filePath = utils.getFilePathFromUrl(props.url);
        this.state = {
            cycles:[]
        };
    }

    refs: {
        [string: string]: any;
        root: HTMLDivElement;
        graphRoot: HTMLDivElement;
        controlRoot: HTMLDivElement;
    }

    filePath: string;
    componentDidMount() {
        this.loadData().then(()=>{
            // setup listening to resize
            this.disposible.add(onresize.on(this.graphRenderer.resize))
        });
        this.disposible.add(
            cast.activeProjectConfigDetailsUpdated.on(()=>{
                this.loadData();
            })
        );
    }

    render() {
        let hasCycles = !!this.state.cycles.length;

        let cyclesMessages = hasCycles
            ? this.state.cycles.map((cycle,i)=>{
                let cycleText = cycle.join(' ⬅️ ');
                return (
                    <div key={i} style={controlItemStyle}>
                        <div style={cycleHeadingStyle}> {i+1}) Cycle <Clipboard text={cycleText} /></div>
                        <div>
                            {cycleText}
                       </div>
                    </div>
                );
            })
            : <div key={-1} style={controlItemStyle}>No cycles 🌹</div>;

        return (
            <div
                ref="root" tabIndex={0}
                className="dependency-view"
                style={csx.extend(csx.vertical,csx.flex, csx.newLayerParent, styles.someChildWillScroll)}
                onKeyPress={this.handleKey}>
                <div ref="graphRoot" style={csx.extend(csx.vertical,csx.flex)}>
                    {/* Graph goes here */}
                </div>

                <div ref="controlRoot" className="graph-controls"
                    style={[csx.newLayer, csx.horizontal, csx.endJustified, controlRootStyle]}>
                    <div style={[csx.vertical, controlRightStyle]}>
                        <div className="control-zoom" style={controlItemStyle}>
                            <a className="control-zoom-in" href="#" title="Zoom in" onClick={this.zoomIn}/>
                            <a className="control-zoom-out" href="#" title="Zoom out" onClick={this.zoomOut}/>
                            <a className="control-fit" href="#" title="Fit" onClick={this.zoomFit}/>
                        </div>
                        {cyclesMessages}
                    </div>
               </div>

               <div data-comment="Tip" style={csx.extend(styles.Tip.root,csx.content)}>
                    Tap <span style={styles.Tip.keyboardShortCutStyle}>R</span> to refresh
               </div>

            </div>
        );
    }

    handleKey = (e:any)=>{
        let unicode = e.charCode;
        if (String.fromCharCode(unicode).toLowerCase() === "r"){
            this.loadData();
        }
    }

    loadData = () => {
{'fraction_non_alphanumeric': 0.14533747269173278, 'fraction_numerical': 0.008278716798896172, 'mean_word_length': 1.9041736227045074, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 67, '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': '5193617', 'n_tokens_mistral': 2559, 'n_tokens_neox': 2423, 'n_words': 509}