<commit_before><template>
  <div class="console-pan" :style="style">
    <div class="pan-head">
      <el-badge
        :value="logs.length"
        :max="99">
        Console
      </el-badge>
      <el-button
        icon="delete2"
        size="mini"
        v-show="logs.length"
        @click="clearLogs">
        Clear
      </el-button>
    </div>
    <div class="console-logs" ref="console">
      <div
        class="console-log"
        :class="`console-log-${log.type}`"
        key="index"
        v-for="(log, index) in logs">
        {{ log.message }}
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex'
  import { Badge, Button } from 'element-ui'
  import panPosition from '@/utils/pan-position'

  export default {
    watch: {
      logs() {
        const { console } = this.$refs
        this.$nextTick(() => {
          console.scrollTop = console.scrollHeight
        })
      }
    },
    computed: {
      ...mapState(['logs', 'activePans']),
      style() {
        return panPosition(this.activePans, 'console')
      }
    },
    methods: {
      ...mapActions(['clearLogs'])
    },
    components: {
      'el-badge': Badge,
      'el-button': Button
    }
  }
</script>

<style scoped>
  .console-logs {
    height: calc(100% - 40px);
    overflow: auto;
    padding: 0 10px;
  }

  .console-log {
    white-space: pre;
    font-size: 13px;
  }

  .console-log-error {
    color: red;
  }
</style><commit_msg>add missing resizer<commit_after><template>
  <div class="console-pan" :style="style">
    <div class="pan-head">
      <el-badge
        :value="logs.length"
        :max="99">
        Console
      </el-badge>
      <el-button
        icon="delete2"
        size="mini"
        v-show="logs.length"
        @click="clearLogs">
        Clear
      </el-button>
    </div>
    <div class="console-logs" ref="console">
      <div
        class="console-log"
        :class="`console-log-${log.type}`"
        key="index"
        v-for="(log, index) in logs">
        {{ log.message }}
      </div>
    </div>
    <pan-resizer />
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex'
  import { Badge, Button } from 'element-ui'
  import panPosition from '@/utils/pan-position'
  import PanResizer from '@/components/PanResizer.vue'

  export default {
    watch: {
      logs() {
        const { console } = this.$refs
        this.$nextTick(() => {
          console.scrollTop = console.scrollHeight
        })
      }
    },
    computed: {
      ...mapState(['logs', 'activePans']),
      style() {
        return panPosition(this.activePans, 'console')
      }
    },
    methods: {
      ...mapActions(['clearLogs'])
    },
    components: {
      'el-badge': Badge,
      'el-button': Button,
      'pan-resizer': PanResizer
    }
  }
</script>

<style scoped>
  .console-logs {
    height: calc(100% - 40px);
    overflow: auto;
    padding: 0 10px;
  }

  .console-log {
    white-space: pre;
    font-size: 13px;
  }

  .console-log-error {
    color: red;
  }
</style>
{'fraction_non_alphanumeric': 0.1694750486066105, 'fraction_numerical': 0.008425145819831496, 'mean_word_length': 1.9260663507109004, 'pattern_counts': {'":': 0, '<': 40, '<?xml version=': 0, '>': 42, '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': '1757611', 'n_tokens_mistral': 1074, 'n_tokens_neox': 1047, 'n_words': 198}