<template>
  <div class="wrapper">
      
  </div>
</template>

<script>
export default {
  data() {
    return {
      segmentName: "InterestingSegment",
    };
  },
  props: ["protein", "acids", "from", "to"],

  methods: {
    init() {
      this.from = null;
      this.to = null;
      this.segmentName = "InterestingSegment";
    },
    cancel() {
      this.init();
      this.$emit("cancel");
    },
  },

  props: ["protein", "acids", "from", "to"],
  watch: {
    acids(acidSelection) {
      if (acidSelection?.first == null) {
        this.init();
        return;
      }
      this.from = acidSelection?.first;
      this.to = acidSelection?.last;
    },
  },
};
</script>

<style scoped>
.wrapper {
  display: flex;
  width: 100%;
}
</style>