<commit_before><template>
  <v-card>
    <back-button alignLeft :route="{name: 'Browse', params: {executeSearch: true}}" text="Back to search"></back-button>
    <v-card-title>
      <h2>{{this.params.index}} / {{this.params.type}} / {{this.params.id}}</h2>
      <reload-button alignLeft :action="() => this.$refs.dataLoader.loadData()"></reload-button>
    </v-card-title>
    <v-divider></v-divider>

    <v-card-text>
      <data-loader method="get" :methodParams="methodParams" ref="dataLoader">
        <template slot-scope="data">
          <v-tabs>
            <v-tab key="tab1">Collapsible</v-tab>
            <v-tab key="tab2">Raw</v-tab>

            <v-tab-item key="tab1">
              <v-flex pa-3>
                <vue-print-object :printableObject="data.body"></vue-print-object>
              </v-flex>
            </v-tab-item>

            <v-tab-item key="tab2">
              <v-flex pa-3>
                <pre class="scroll-y">{{data.body}}</pre>
              </v-flex>
            </v-tab-item>
          </v-tabs>
        </template>
      </data-loader>
    </v-card-text>
  </v-card>
</template>

<script>
  import BackButton from '@/components/shared/BackButton'
  import VuePrintObject from 'vue-print-object'

  export default {
    computed: {
      params () {
        return this.$route.params
      },
      methodParams () {
        let params = this.params
        return {index: params.index, type: params.type, id: params.id}
      }
    },
    components: {
      BackButton,
      VuePrintObject
    }
  }
</script><commit_msg>new component to switch between printing options<commit_after><template>
  <v-card>
    <back-button alignLeft :route="{name: 'Browse', params: {executeSearch: true}}" text="Back to search"></back-button>
    <v-card-title>
      <h2>{{this.params.index}} / {{this.params.type}} / {{this.params.id}}</h2>
      <reload-button alignLeft :action="() => this.$refs.dataLoader.loadData()"></reload-button>
    </v-card-title>
    <v-divider></v-divider>

    <v-card-text>
      <data-loader method="get" :methodParams="methodParams" ref="dataLoader">
        <template slot-scope="data">
          <print-pretty-or-raw :document="data.body"></print-pretty-or-raw>
        </template>
      </data-loader>
    </v-card-text>
  </v-card>
</template>

<script>
  import BackButton from '@/components/shared/BackButton'
  import PrintPrettyOrRaw from '@/components/shared/PrintPrettyOrRaw'

  export default {
    computed: {
      params () {
        return this.$route.params
      },
      methodParams () {
        let params = this.params
        return {index: params.index, type: params.type, id: params.id}
      }
    },
    components: {
      BackButton,
      PrintPrettyOrRaw
    }
  }
</script>
{'fraction_non_alphanumeric': 0.1744312026002167, 'fraction_numerical': 0.0036114120621162874, 'mean_word_length': 2.2976190476190474, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 69, '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': '5506499', 'n_tokens_mistral': 917, 'n_tokens_neox': 896, 'n_words': 157}