<commit_before><template>
  <scroll-pane>
    <action-header v-show="hasTarget" slot="header">
      <span class="component-name">
        <span style="color:#ccc">&lt;</span><span>{{ target.name }}</span><span style="color:#ccc">&gt;</span>
      </span>
      <a class="button inspect" @click="inspectDOM" title="Inspect DOM">
        <i class="material-icons">visibility</i>
        <span>Inspect DOM</span>
      </a>
    </action-header>
    <section v-show="!hasTarget" slot="scroll" class="notice">
      <div>Select a component instance to inspect.</div>
    </section>
    <section v-show="hasTarget" slot="scroll">
      <div class="data-fields">
        <data-field v-for="field in sortedState"
          :key="field.key"
          :field="field"
          :depth="0">
        </data-field>
      </div>
      <div class="notice" v-show="target.state && !target.state.length">
        <div>This instance has no reactive state.</div>
      </div>
    </section>
  </scroll-pane>
</template>

<script>
import DataField from 'components/DataField.vue'
import ScrollPane from 'components/ScrollPane.vue'
import ActionHeader from 'components/ActionHeader.vue'

const isChrome = typeof chrome !== 'undefined' && chrome.devtools

export default {
  components: {
    DataField,
    ScrollPane,
    ActionHeader
  },
  props: {
    target: Object
  },
  computed: {
    hasTarget () {
      return this.target.id != null
    },
    sortedState () {
      return this.target.state && this.target.state.slice().sort((a, b) => {
        if (a.key < b.key) return -1
        if (a.key > b.key) return 1
        return 0
      })
    }
  },
  methods: {
    inspectDOM () {
      if (!this.hasTarget) return
      if (isChrome) {
        chrome.devtools.inspectedWindow.eval(
          `inspect(window.__VUE_DEVTOOLS_INSTANCE_MAP__.get(${this.target.id}).$el)`
        )
      } else {
        window.alert('DOM inspection is not supported in this shell.')
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.no-state
  color #ccc
  text-align center
  font-size 14px

.non-selected
  color #ccc
  text-align center
</style><commit_msg>tweak component name<commit_after><template>
  <scroll-pane>
    <action-header v-show="hasTarget" slot="header">
      <span class="component-name">
        <span style="color:#ccc">&lt;</span>
        <span>{{ target.name }}</span>
        <span style="color:#ccc">&gt;</span>
      </span>
      <a class="button inspect" @click="inspectDOM" title="Inspect DOM">
        <i class="material-icons">visibility</i>
        <span>Inspect DOM</span>
      </a>
    </action-header>
    <section v-show="!hasTarget" slot="scroll" class="notice">
      <div>Select a component instance to inspect.</div>
    </section>
    <section v-show="hasTarget" slot="scroll">
      <div class="data-fields">
        <data-field v-for="field in sortedState"
          :key="field.key"
          :field="field"
          :depth="0">
        </data-field>
      </div>
      <div class="notice" v-show="target.state && !target.state.length">
        <div>This instance has no reactive state.</div>
      </div>
    </section>
  </scroll-pane>
</template>

<script>
import DataField from 'components/DataField.vue'
import ScrollPane from 'components/ScrollPane.vue'
import ActionHeader from 'components/ActionHeader.vue'

const isChrome = typeof chrome !== 'undefined' && chrome.devtools

export default {
  components: {
    DataField,
    ScrollPane,
    ActionHeader
  },
  props: {
    target: Object
  },
  computed: {
    hasTarget () {
      return this.target.id != null
    },
    sortedState () {
      return this.target.state && this.target.state.slice().sort((a, b) => {
        if (a.key < b.key) return -1
        if (a.key > b.key) return 1
        return 0
      })
    }
  },
  methods: {
    inspectDOM () {
      if (!this.hasTarget) return
      if (isChrome) {
        chrome.devtools.inspectedWindow.eval(
          `inspect(window.__VUE_DEVTOOLS_INSTANCE_MAP__.get(${this.target.id}).$el)`
        )
      } else {
        window.alert('DOM inspection is not supported in this shell.')
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.no-state
  color #ccc
  text-align center
  font-size 14px

.non-selected
  color #ccc
  text-align center

.component-name
  margin 0 10px
</style>
{'fraction_non_alphanumeric': 0.15607734806629833, 'fraction_numerical': 0.003453038674033149, 'mean_word_length': 2.5790774299835255, 'pattern_counts': {'":': 0, '<': 81, '<?xml version=': 0, '>': 83, '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': '5931337', 'n_tokens_mistral': 1434, 'n_tokens_neox': 1400, 'n_words': 305}