<commit_before><template>
  <div class="root">
    <div v-if="errorList && errorList.length" class="list">
      <div class="summary">
        <span>{{errorList.length}}</span>
        errors / warnings
      </div>
      <div class="error-list">
        <div v-for="e in errorList" :key="e" class="error-item" :class="getSeverity(e.severity)">
          <div class="severity">
            <ui-icon>{{getIconName(e.severity)}}</ui-icon>
          </div>
          <div class="message">
            <div class="pos" v-if="e.pos">
              <span class="pos-line">{{e.pos.startLine}}</span>
              <span class="pos-col">{{e.pos.startCol}}</span>
            </div>
            {{e.message}}
          </div>
        </div>
      </div>
    </div>
    <div v-else class="empty-tip">
      No lexical or syntactic error detected.
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Lifecycle, p, Prop, Watch } from 'av-ts';
import { ErrorSeverity } from '../../../../core/main';

@Component({
  name: 'error-list'
})
export default class ErrorList extends Vue {
  @Prop errorList = p({type: Array})

  getSeverity(severity: ErrorSeverity): string{
    return ErrorSeverity[severity];
  }
  getIconName(severity: ErrorSeverity): string {
    const iconMap: {[name:string]: string} = {
      INFO: 'info',
      WARN: 'warning',
      ERROR: 'error',
      FATAL: 'block',
    }
    return iconMap[this.getSeverity(severity)];
  }
}
</script>

<style scoped>
  .root {
    flex: 0;
    border-left: solid #eee 1px;
    min-width: 350px;
  }
  .list {
    display: flex;
    flex-direction: column;
  }
  .empty-tip{
    text-align: center;
    font-size: 2em;
    color: #cccccc;
    height: 100%;
    margin: 20px;
  }
  .summary {
    height: 45px;
    background: #eee;
    line-height: 45px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    color: #555;
  }
  .summary span {
    color: #f85;
  }
  .error-list {
    overflow-y: auto;
    flex: 1;
  }
  .error-item {
    display: flex;
    line-height: 30px;
    align-items: center;
  }
  .error-item + .error-item {
    border-top: solid 1px #eee;
  }
  .severity {
    flex: 0;
    min-width: 40px;
    height: 30px;
    text-align: center;
  }
  .INFO .severity {
    color: #cec;
  }
  .WARN .severity {
    color: #ec5;
  }
  .ERROR .severity {
    color: #f55;
  }
  .FATAL .severity {
    color: #f00;
  }
  .message {
    flex: 1;
    font-size: 0.9em;
  }
  .pos {
    display: inline-block;
    background: #ecd;
    border-radius: 5px;
    padding: 0 5px;
    height: 22px;
    line-height: 22px;
    font-size: 16px;
  }

  .pos-col::before, .pos-line::before {
    font-family: Monaco, Consolas, Courier New, Courier monospace;
    font-weight: 900;
    font-size: 0.9em;
    color: #999;
  }
  .pos-col::before {
    content: 'COL';
  }
  .pos-line::before {
    content: 'LN';
  }<commit_msg>indicate error source<commit_after><template>
  <div class="root">
    <div v-if="errorList && errorList.length" class="list">
      <div class="summary">
        <span>{{errorList.length}}</span>
        errors / warnings
      </div>
      <div class="error-list">
        <div v-for="e in errorList" :key="e" class="error-item" :class="getSeverity(e.severity)">
          <div class="severity">
            <ui-icon>{{getIconName(e.severity)}}</ui-icon>
          </div>
          <div class="message">
            <div class="err-src" v-if="e.name !== 'PicolError'">
              {{e.name.replace('Error', '')}}
            </div>
            <div class="pos" v-if="e.pos">
              <span class="pos-line">{{e.pos.startLine}}</span>
              <span class="pos-col">{{e.pos.startCol}}</span>
            </div>
            {{e.message}}
          </div>
        </div>
      </div>
    </div>
    <div v-else class="empty-tip">
      No lexical or syntactic error detected.
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Lifecycle, p, Prop, Watch } from 'av-ts';
import { ErrorSeverity } from '../../../../core/main';

@Component({
  name: 'error-list'
})
export default class ErrorList extends Vue {
  @Prop errorList = p({type: Array})

  getSeverity(severity: ErrorSeverity): string{
    return ErrorSeverity[severity];
  }
  getIconName(severity: ErrorSeverity): string {
    const iconMap: {[name:string]: string} = {
      INFO: 'info',
      WARN: 'warning',
      ERROR: 'error',
      FATAL: 'block',
    }
    return iconMap[this.getSeverity(severity)];
  }
}
</script>

<style scoped>
  .root {
    flex: 0;
    border-left: solid #eee 1px;
    min-width: 350px;
  }
  .list {
    display: flex;
    flex-direction: column;
  }
  .empty-tip{
    text-align: center;
    font-size: 2em;
    color: #cccccc;
    height: 100%;
    margin: 20px;
  }
  .summary {
    height: 45px;
    background: #eee;
    line-height: 45px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    color: #555;
  }
  .summary span {
    color: #f85;
  }
  .error-list {
    overflow-y: auto;
    flex: 1;
  }
  .error-item {
    display: flex;
    line-height: 30px;
    align-items: center;
  }
  .error-item + .error-item {
    border-top: solid 1px #eee;
  }
  .severity {
    flex: 0;
    min-width: 40px;
    height: 30px;
    text-align: center;
  }
  .INFO .severity {
    color: #cec;
  }
  .WARN .severity {
    color: #ec5;
  }
  .ERROR .severity {
    color: #f55;
  }
  .FATAL .severity {
    color: #f00;
  }
  .message {
    flex: 1;
    font-size: 0.9em;
  }

  .err-src, .pos {
    display: inline-block;
    border-radius: 5px;
    padding: 0 5px;
    height: 22px;
    line-height: 22px;
    font-size: 16px;
  }

  .err-src {
    background: #aef;
  }

  .pos {
    background: #ecd;
  }

  .pos-col::before, .pos-line::before {
    font-family: Monaco, Consolas, Courier New, Courier monospace;
    font-weight: 900;
    font-size: 0.9em;
    color: #999;
  }
  .pos-col::before {
    content: 'COL';
  }
  .pos-line::before {
    content: 'LN';
  }
{'fraction_non_alphanumeric': 0.17065917726747068, 'fraction_numerical': 0.018833636213447878, 'mean_word_length': 2.169633507853403, 'pattern_counts': {'":': 0, '<': 67, '<?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': '6069731', 'n_tokens_mistral': 2392, 'n_tokens_neox': 2238, 'n_words': 483}