<commit_before>
import React from "react";
import twixty from "twixtykit";

import SK from "../../SK";
import style from "./ArcDetail.scss";

export default class ArcDetail extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = "ArcDetail";
    this.state = {
      vertices: [],
      arc: {
        kind: "arc",
        from: {},
        to: {},
        delay: 0
      },
    };
  }
  componentDidMount() {
    this.doSubscriptions(this.props);
  }
  componentWillReceiveProps(newProps) {
    if (newProps.arcId === this.props.arcId) {
      return;
    }
    if (this.vertexHandle) {
      this.vertexHandle.stop();
    }
    if (this.arcHandle) {
      this.arcHandle.stop();
    }
    this.doSubscriptions(newProps);
  }
  doSubscriptions(props) {
    this.vertexHandle = SK.vertices.watch(props.broadcastId)
    .on("data", (vertices) => {
      this.setState({vertices});
    })
    .catch((...args) => {
      twixty.error(...args);
    });
    if (props.create !== true) {
      if (!props.arcId) {
        throw new Error("ArcDetail called with create false but no arcId.");
      }
      this.arcHandle = SK.arcs.watch({id: props.arcId})
      .then((arcs) => {
        this.setState({initialDelay: arcs[0].delay});
      })
      .on("data", (arcs) => {
        this.setState({arc: arcs[0]});
      })
      .catch((err) => {
        twixty.error(err);
      });
    }

    // this.arcHandle = SK.arcs.watch({broadcastId})
    // .on("data", (arcs) => {
    //   this.setState({arcs});
    // })
    // .catch((...args) => {
    //   twixty.error(...args);
    // });
  }
  componentWillUnmount() {
    // this.arcHandle.stop();
    this.vertexHandle.stop();
    if (this.arcHandle) {
      this.arcHandle.stop();
    }
  }

  makeList(direction) {
    const ret = [];
    const currentConn = this.state.arc[direction];
    let vertexField;
    if (direction === "from") {
      vertexField = "outputs";
    }
    else if (direction === "to") {
      vertexField = "inputs";
    }
    this.state.vertices.forEach((v) => {
      v[vertexField].forEach((io) => {
        const onClick = () => {
          const newArc = {...this.state.arc};
          newArc[direction] = {
            vertexId: v.id,
            ioName: io.name
          };
          this.setState({arc: newArc});
          this.props.onChange(newArc);
        };<commit_msg>Maybe fix a production error?<commit_after>
import React from "react";
import twixty from "twixtykit";

import SK from "../../SK";
import style from "./ArcDetail.scss";

export default class ArcDetail extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = "ArcDetail";
    this.state = {
      vertices: [],
      arc: {
        kind: "arc",
        from: {},
        to: {},
        delay: 0
      },
    };
  }
  componentDidMount() {
    this.doSubscriptions(this.props);
  }
  componentWillReceiveProps(newProps) {
    if (newProps.arcId === this.props.arcId) {
      return;
    }
    if (this.vertexHandle) {
      this.vertexHandle.stop();
    }
    if (this.arcHandle) {
      this.arcHandle.stop();
    }
    this.doSubscriptions(newProps);
  }
  doSubscriptions(props) {
    this.vertexHandle = SK.vertices.watch(props.broadcastId)
    .on("data", (vertices) => {
      this.setState({vertices});
    })
    .catch((...args) => {
      twixty.error(...args);
    });
    if (props.create !== true) {
      if (!props.arcId) {
        throw new Error("ArcDetail called with create false but no arcId.");
      }
      this.arcHandle = SK.arcs.watch({id: props.arcId})
      .then((arcs) => {
        this.setState({initialDelay: arcs[0].delay});
      })
      .on("data", (arcs) => {
        this.setState({arc: arcs[0]});
      })
      .catch((err) => {
        twixty.error(err);
      });
    }

    // this.arcHandle = SK.arcs.watch({broadcastId})
    // .on("data", (arcs) => {
    //   this.setState({arcs});
    // })
    // .catch((...args) => {
    //   twixty.error(...args);
    // });
  }
  componentWillUnmount() {
    // this.arcHandle.stop();
    this.vertexHandle.stop();
    if (this.arcHandle) {
      this.arcHandle.stop();
    }
  }

  makeList(direction) {
    if (!this.state.vertices) {
      return <div/>;
    }
    const ret = [];
    const currentConn = this.state.arc[direction];
    let vertexField;
    if (direction === "from") {
      vertexField = "outputs";
    }
    else if (direction === "to") {
      vertexField = "inputs";
    }
    this.state.vertices.forEach((v) => {
      v[vertexField].forEach((io) => {
        const onClick = () => {
          const newArc = {...this.state.arc};
          newArc[direction] = {
            vertexId: v.id,
            ioName: io.name
          };
          this.setState({arc: newArc});
          this.props.onChange(newArc);
        };
{'fraction_non_alphanumeric': 0.17934446505875076, 'fraction_numerical': 0.0012368583797155227, 'mean_word_length': 2.024937655860349, 'pattern_counts': {'":': 0, '<': 4, '<?xml version=': 0, '>': 24, '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': '1679572', 'n_tokens_mistral': 1612, 'n_tokens_neox': 1603, 'n_words': 272}