<commit_before>/* eslint-disable i18next/no-literal-string */
import {css, cx} from "@emotion/css"
import {WindowContentProps} from "@touk/window-manager"
import _ from "lodash"
import React from "react"
import {connect} from "react-redux"
import {formatAbsolutely} from "../../common/DateUtils"
import * as JsonUtils from "../../common/JsonUtils"
import HttpService from "../../http/HttpService"
import {getProcessId, getProcessVersionId, getVersions} from "../../reducers/selectors/graph"
import {getTargetEnvironmentId} from "../../reducers/selectors/settings"
import "../../stylesheets/visualization.styl"
import {WindowContent} from "../../windowManager"
import EdgeDetailsContent from "../graph/node-modal/edge/EdgeDetailsContent"
import NodeDetailsContent from "../graph/node-modal/NodeDetailsContent"
import {ProcessVersionType} from "../Process/types"
import {SelectWithFocus} from "../withFocus"

interface State {
  currentDiffId: string,
  otherVersion: string,
  remoteVersions: ProcessVersionType[],
  difference: unknown,
}

//TODO: handle different textarea heights
class VersionsForm extends React.Component<Props, State> {

  //TODO: better way of detecting remote version? also: how to sort versions??
  remotePrefix = "remote-"
  initState: State = {
    otherVersion: null,
    currentDiffId: null,
    difference: null,
    remoteVersions: [],
  }

  state = this.initState

  componentDidMount() {
    if (this.props.processId && this.props.otherEnvironment) {
      HttpService.fetchRemoteVersions(this.props.processId).then(response => this.setState({remoteVersions: response.data || []}))
    }
  }

  loadVersion(versionId: string) {
    if (versionId) {
      HttpService.compareProcesses(
        this.props.processId,
        this.props.version,
        this.versionToPass(versionId),
        this.isRemote(versionId),
      ).then(
        (response) => this.setState({difference: response.data, otherVersion: versionId, currentDiffId: null}),
      )
    } else {
      this.setState(this.initState)
    }

  }

  isRemote(versionId: string) {
    return versionId.startsWith(this.remotePrefix)
  }

  versionToPass(versionId: string) {
    return versionId.replace(this.remotePrefix, "")
  }

  versionDisplayString(versionId: string) {
    return this.isRemote(versionId) ? `${this.versionToPass(versionId)} on ${this.props.otherEnvironment}` : versionId
  }

  createVersionElement(version: ProcessVersionType, versionPrefix = "") {
    const versionId = versionPrefix + version.processVersionId
    return (
      <option key={versionId} value={versionId}>
        {this.versionDisplayString(versionId)} - created by {version.user} &nbsp; {formatAbsolutely(version.createDate)}</option>
    )
  }

  render() {
    return (
      <>
        <div className="esp-form-row">
          <p>Version to compare</p>
          <SelectWithFocus
            autoFocus={true}
            id="otherVersion"
            className="node-input"
            value={this.state.otherVersion || ""}
            onChange={(e) => this.loadVersion(e.target.value)}
          >
            <option key="" value=""/>
            {this.props.versions.filter(version => this.props.version !== version.processVersionId)
              .map(version => this.createVersionElement(version))}
            {this.state.remoteVersions.map(version => this.createVersionElement(version, this.remotePrefix))}
          </SelectWithFocus>
        </div>
        {
          this.state.otherVersion ?
            (
              <div>
                <div className="esp-form-row">
                  <p>Difference to pick</p>
                  <SelectWithFocus
                    id="otherVersion"
                    className="node-input"
                    value={this.state.currentDiffId || ""}
                    onChange={(e) => this.setState({currentDiffId: e.target.value})}
                  >
                    <option key="" value=""/>
                    {_.keys(this.state.difference).map((diffId) => (
                      <option key={diffId} value={diffId}>{diffId}</option>))}
                  </SelectWithFocus>
                </div>
                {this.state.currentDiffId ?
                  this.printDiff(this.state.currentDiffId) :
                  null}<commit_msg>ignore layout only (#2663)<commit_after>/* eslint-disable i18next/no-literal-string */
import {css, cx} from "@emotion/css"
import {WindowContentProps} from "@touk/window-manager"
import _ from "lodash"
import React from "react"
import {connect} from "react-redux"
import {formatAbsolutely} from "../../common/DateUtils"
import * as JsonUtils from "../../common/JsonUtils"
import HttpService from "../../http/HttpService"
import {getProcessId, getProcessVersionId, getVersions} from "../../reducers/selectors/graph"
import {getTargetEnvironmentId} from "../../reducers/selectors/settings"
import "../../stylesheets/visualization.styl"
import {WindowContent} from "../../windowManager"
import EdgeDetailsContent from "../graph/node-modal/edge/EdgeDetailsContent"
import NodeDetailsContent from "../graph/node-modal/NodeDetailsContent"
import {ProcessVersionType} from "../Process/types"
import {SelectWithFocus} from "../withFocus"

interface State {
  currentDiffId: string,
  otherVersion: string,
  remoteVersions: ProcessVersionType[],
  difference: unknown,
}

//TODO: handle different textarea heights
class VersionsForm extends React.Component<Props, State> {

  //TODO: better way of detecting remote version? also: how to sort versions??
  remotePrefix = "remote-"
  initState: State = {
    otherVersion: null,
    currentDiffId: null,
    difference: null,
    remoteVersions: [],
  }

  state = this.initState

  isLayoutChangeOnly(diffId: string): boolean {
    const {type, currentNode, otherNode} = this.state.difference[diffId]
    if (type === "NodeDifferent") {
      return this.differentPathsForObjects(currentNode, otherNode).every(path => path.startsWith("additionalFields.layoutData"))
    }
  }

  componentDidMount() {
    if (this.props.processId && this.props.otherEnvironment) {
      HttpService.fetchRemoteVersions(this.props.processId).then(response => this.setState({remoteVersions: response.data || []}))
    }
  }

  loadVersion(versionId: string) {
    if (versionId) {
      HttpService.compareProcesses(
        this.props.processId,
        this.props.version,
        this.versionToPass(versionId),
        this.isRemote(versionId),
      ).then(
        (response) => this.setState({difference: response.data, otherVersion: versionId, currentDiffId: null}),
      )
    } else {
      this.setState(this.initState)
    }

  }

  isRemote(versionId: string) {
    return versionId.startsWith(this.remotePrefix)
  }

  versionToPass(versionId: string) {
    return versionId.replace(this.remotePrefix, "")
  }

  versionDisplayString(versionId: string) {
    return this.isRemote(versionId) ? `${this.versionToPass(versionId)} on ${this.props.otherEnvironment}` : versionId
  }

  createVersionElement(version: ProcessVersionType, versionPrefix = "") {
    const versionId = versionPrefix + version.processVersionId
    return (
      <option key={versionId} value={versionId}>
        {this.versionDisplayString(versionId)} - created by {version.user} &nbsp; {formatAbsolutely(version.createDate)}</option>
    )
  }

  render() {
    return (
      <>
        <div className="esp-form-row">
          <p>Version to compare</p>
          <SelectWithFocus
            autoFocus={true}
            id="otherVersion"
            className="node-input"
            value={this.state.otherVersion || ""}
            onChange={(e) => this.loadVersion(e.target.value)}
          >
            <option key="" value=""/>
            {this.props.versions.filter(version => this.props.version !== version.processVersionId)
              .map(version => this.createVersionElement(version))}
            {this.state.remoteVersions.map(version => this.createVersionElement(version, this.remotePrefix))}
          </SelectWithFocus>
        </div>
        {
          this.state.otherVersion ?
            (
              <div>
                <div className="esp-form-row">
                  <p>Difference to pick</p>
                  <SelectWithFocus
                    id="otherVersion"
                    className="node-input"
                    value={this.state.currentDiffId || ""}
                    onChange={(e) => this.setState({currentDiffId: e.target.value})}
                  >
                    <option key="" value=""/>
                    {_.keys(this.state.difference).map((diffId) => {
                      const isLayoutOnly = this.isLayoutChangeOnly(diffId)
                      return (
                        <option key={diffId} value={diffId} disabled={isLayoutOnly}>{diffId} {isLayoutOnly && "(position only)"}</option>)
                    })}
                  </SelectWithFocus>
                </div>
                {this.state.currentDiffId ?
                  this.printDiff(this.state.currentDiffId) :
                  null}
{'fraction_non_alphanumeric': 0.13193221830985916, 'fraction_numerical': 0.0008802816901408451, 'mean_word_length': 2.6356, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 62, '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': '1366869', 'n_tokens_mistral': 2537, 'n_tokens_neox': 2476, 'n_words': 475}