<commit_before><template>
  <scroll-pane>
    <action-header slot="header">
      <div class="search">
        <VueIcon icon="search" />
        <input
          v-model.trim="filter"
          placeholder="Filter inspected state"
        >
      </div>
      <a
        v-tooltip="'Export Vuex State'"
        class="button export"
        @click="copyStateToClipboard"
      >
        <VueIcon icon="content_copy" />
        <span>Export</span>
        <transition name="slide-up">
          <span
            v-show="showStateCopiedMessage"
            class="message"
          >
            (Copied to clipboard!)
          </span>
        </transition>
      </a>
      <a
        v-tooltip="'Import Vuex State'"
        class="button import"
        @click="toggleImportStatePopup"
      >
        <VueIcon icon="content_paste" />
        <span>Import</span>
      </a>
      <transition name="slide-down">
        <div
          v-if="showImportStatePopup"
          class="import-state"
        >
          <textarea
            placeholder="Paste state object here to import it..."
            @input="importState"
            @keydown.esc.stop="closeImportStatePopup"
          />
          <span
            v-show="showBadJSONMessage"
            class="message invalid-json"
          >
            INVALID JSON!
          </span>
        </div>
      </transition>
    </action-header>
    <div
      slot="scroll"
      class="vuex-state-inspector"
      :class="{
        pointer: isOnlyMutationPayload
      }"
      @click="isOnlyMutationPayload && loadState()"
    >
      <state-inspector
        :state="filteredState"
        :dim-after="isOnlyMutationPayload ? 1 : -1"
      />
    </div>
    <div
      v-if="$shared.snapshotLoading"
      slot="footer"
      class="state-info loading-vuex-state"
    >
      <div class="label">
        Loading state...
      </div>

      <VueLoadingIndicator />
    </div>
    <div
      v-else-if="isOnlyMutationPayload"
      slot="footer"
      class="state-info recording-vuex-state"
    >
      <div class="label">
        <VueIcon
          class="medium"
          icon="cached"
        />
        <span>Recording state on-demand...</span>
        <span
          v-if="lastReceivedState"
          class="note"
        >displaying last received state</span>
      </div>

      <div>
        <VueButton
          data-id="load-vuex-state"
          icon-left="arrow_forward"
          class="accent flat"
          @click="loadState()"
        >
          Load state
        </VueButton>
      </div>
    </div>
  </scroll-pane>
</template>

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

import { searchDeepInObject, sortByKey, stringify, parse } from 'src/util'
import debounce from 'lodash.debounce'
import groupBy from 'lodash.groupby'
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  components: {
    ScrollPane,
    ActionHeader,
    StateInspector
  },

  provide () {
    return {
      InspectorInjection: this.injection
    }
  },

  data () {
    return {
      showStateCopiedMessage: false,
      showBadJSONMessage: false,
      showImportStatePopup: false,
      filter: '',
      injection: {
        editable: false
      }
    }
  },

  computed: {
    ...mapState('vuex', [
      'activeIndex',
      'inspectedIndex',
      'lastReceivedState'
    ]),

    ...mapGetters('vuex', [
      'inspectedState',
      'filteredHistory',
      'inspectedEntry'
    ]),

    filteredState () {
      const inspectedState = this.isOnlyMutationPayload ? {
        mutation: this.inspectedState.mutation,
        ...this.lastReceivedState
      } : this.inspectedState

      const getProcessedState = (state, type) => {
        if (!Array.isArray(state)) {
          return Object.keys(state).map(key => ({
            key,
            editable: !this.isOnlyMutationPayload && type === 'state',
            value: state[key]<commit_msg>fix(vuex): null issue in VuexStateInspector<commit_after><template>
  <scroll-pane>
    <action-header slot="header">
      <div class="search">
        <VueIcon icon="search" />
        <input
          v-model.trim="filter"
          placeholder="Filter inspected state"
        >
      </div>
      <a
        v-tooltip="'Export Vuex State'"
        class="button export"
        @click="copyStateToClipboard"
      >
        <VueIcon icon="content_copy" />
        <span>Export</span>
        <transition name="slide-up">
          <span
            v-show="showStateCopiedMessage"
            class="message"
          >
            (Copied to clipboard!)
          </span>
        </transition>
      </a>
      <a
        v-tooltip="'Import Vuex State'"
        class="button import"
        @click="toggleImportStatePopup"
      >
        <VueIcon icon="content_paste" />
        <span>Import</span>
      </a>
      <transition name="slide-down">
        <div
          v-if="showImportStatePopup"
          class="import-state"
        >
          <textarea
            placeholder="Paste state object here to import it..."
            @input="importState"
            @keydown.esc.stop="closeImportStatePopup"
          />
          <span
            v-show="showBadJSONMessage"
            class="message invalid-json"
          >
            INVALID JSON!
          </span>
        </div>
      </transition>
    </action-header>
    <div
      slot="scroll"
      class="vuex-state-inspector"
      :class="{
        pointer: isOnlyMutationPayload
      }"
      @click="isOnlyMutationPayload && loadState()"
    >
      <state-inspector
        :state="filteredState"
        :dim-after="isOnlyMutationPayload ? 1 : -1"
      />
    </div>
    <div
      v-if="$shared.snapshotLoading"
      slot="footer"
      class="state-info loading-vuex-state"
    >
      <div class="label">
        Loading state...
      </div>

      <VueLoadingIndicator />
    </div>
    <div
      v-else-if="isOnlyMutationPayload"
      slot="footer"
      class="state-info recording-vuex-state"
    >
      <div class="label">
        <VueIcon
          class="medium"
          icon="cached"
        />
        <span>Recording state on-demand...</span>
        <span
          v-if="lastReceivedState"
          class="note"
        >displaying last received state</span>
      </div>

      <div>
        <VueButton
          data-id="load-vuex-state"
          icon-left="arrow_forward"
          class="accent flat"
          @click="loadState()"
        >
          Load state
        </VueButton>
      </div>
    </div>
  </scroll-pane>
</template>

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

import { searchDeepInObject, sortByKey, stringify, parse } from 'src/util'
import debounce from 'lodash.debounce'
import groupBy from 'lodash.groupby'
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  components: {
    ScrollPane,
    ActionHeader,
    StateInspector
  },

  provide () {
    return {
      InspectorInjection: this.injection
    }
  },

  data () {
    return {
      showStateCopiedMessage: false,
      showBadJSONMessage: false,
      showImportStatePopup: false,
      filter: '',
      injection: {
        editable: false
      }
    }
  },

  computed: {
    ...mapState('vuex', [
      'activeIndex',
      'inspectedIndex',
      'lastReceivedState'
    ]),

    ...mapGetters('vuex', [
      'inspectedState',
      'filteredHistory',
      'inspectedEntry'
    ]),

    filteredState () {
      const inspectedState = this.isOnlyMutationPayload && this.inspectedState.mutation ? {
        mutation: this.inspectedState.mutation,
        ...this.lastReceivedState
      } : this.inspectedState

      const getProcessedState = (state, type) => {
        if (!Array.isArray(state)) {
          return Object.keys(state).map(key => ({
            key,
            editable: !this.isOnlyMutationPayload && type === 'state',
            value: state[key]
{'fraction_non_alphanumeric': 0.12688932228181374, 'fraction_numerical': 0.00048756704046806434, 'mean_word_length': 1.8860358775940909, 'pattern_counts': {'":': 0, '<': 109, '<?xml version=': 0, '>': 113, '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': '2132355', 'n_tokens_mistral': 2460, 'n_tokens_neox': 2409, 'n_words': 444}