<commit_before><template>
  <div class="pure-u-1 pure-u-lg-1-4 gobierto-data-layout-column gobierto-data-layout-sidebar">
    <nav class="gobierto-data-tabs-sidebar">
      <ul>
        <li
          :class="{ 'is-active': activeTab === 0 }"
          class="gobierto-data-tab-sidebar--tab"
          @click="activateTab(0)"
        >
          <span>{{ labelCategories }}</span>
        </li>
        <li
          :class="{ 'is-active': activeTab === 1 || activeTab === 4 }"
          class="gobierto-data-tab-sidebar--tab"
          @click="activateTab(1)"
        >
          <span>{{ labelSets }}</span>
        </li>

        <li
          :class="{ 'is-active': activeTab === 2 }"
          class="gobierto-data-tab-sidebar--tab"
          @click="activateTab(2)"
        >
          <span>{{ labelQueries }}</span>
        </li>
      </ul>
    </nav>
    <div
      v-if="activeTab === 1 || activeTab === 4 && allDatasets"
    >
      <div
        v-for="(item, index) in allDatasets"
        :key="index"
        class="gobierto-data-sidebar-datasets"
      >
        <div class="gobierto-data-sidebar-datasets-links-container">
          <i
            :class="{'rotate-caret': toggle !== index }"
            class="fas fa-caret-down gobierto-data-sidebar-icon"
            @active-toggle="toggle = $event"
            @click="getColumns(item.attributes.slug, index)"
          />
          <a
            :href="item.attributes.slug"
            class="gobierto-data-sidebar-datasets-name"
            @click.prevent.stop="getData(index)"
          >{{ item.attributes.name }}
          </a>
          <div
            v-show="toggle === index"
            @active-toggle="toggle = $event"
          >
            <span
              v-for="(column, i) in columns"
              :key="i"
              :item="i"
              class="gobierto-data-sidebar-datasets-links-columns"
            >
              {{ column }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import { baseUrl } from "./../../lib/commons"
import { getUserId } from "./../../lib/helpers"
export default {
  name: "Sidebar",
  props: {
    activeTab: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      labelSets: "",
      labelQueries: "",
      labelCategories: "",
      titleDataset: '',
      slugDataset: '',
      tableName: '',
      allDatasets: null,
      numberId: '',
      columns: '',
      toggle: 0,
      initAxios: false
    }
  },
  created() {
    this.userId = getUserId()
    this.labelSets = I18n.t("gobierto_data.projects.sets")
    this.labelQueries = I18n.t("gobierto_data.projects.queries")
    this.labelCategories = I18n.t("gobierto_data.projects.categories")
    this.$root.$on('activeToggle', this.activeToggle)
    this.initData()
  },
  methods: {
    initData(){
      if (this.initAxios === false) {
        this.endPoint = `${baseUrl}/datasets`
        axios
          .get(this.endPoint)
          .then(response => {
            this.rawData = response.data

            this.allDatasets = this.rawData.data
            this.allDatasets.sort((a, b) => a.attributes.name.localeCompare(b.attributes.name));

            this.titleDataset = this.rawData.data[0].attributes.name
            this.slugDataset = this.rawData.data[0].attributes.slug
            this.firstColumns(this.slugDataset)
            this.initAxios = true
          })
          .catch(error => {
            console.error(error)
          })
        }
      },
    activeToggle(value){
      this.handleToggle(value)
    },
    firstColumns(slugDataset) {
      this.urlPath = location.origin
      this.endPoint = `/api/v1/data/datasets/${slugDataset}`
      this.url = `${this.urlPath}${this.endPoint}`
      axios
        .get(this.url)
        .then(response => {
          this.rawData = response.data
          this.keysData = this.rawData.data

          this.columns = Object.keys(this.keysData[0])
        })
        .catch(error => {
          console.error(error)
        })
    },
    getColumns(slugDataset, index) {
      this.handleToggle(index)
      this.caretActive = !this.caretActive;
      this.urlPath = location.origin
      this.endPoint = `/api/v1/data/datasets/${slugDataset}`
      this.url = `${this.urlPath}${this.endPoint}`
      axios
        .get(this.url)
        .then(response => {<commit_msg>remove attributes<commit_after><template>
  <div class="pure-u-1 pure-u-lg-1-4 gobierto-data-layout-column gobierto-data-layout-sidebar">
    <nav class="gobierto-data-tabs-sidebar">
      <ul>
        <li
          :class="{ 'is-active': activeTab === 0 }"
          class="gobierto-data-tab-sidebar--tab"
          @click="activateTab(0)"
        >
          <span>{{ labelCategories }}</span>
        </li>
        <li
          :class="{ 'is-active': activeTab === 1 || activeTab === 4 }"
          class="gobierto-data-tab-sidebar--tab"
          @click="activateTab(1)"
        >
          <span>{{ labelSets }}</span>
        </li>

        <li
          :class="{ 'is-active': activeTab === 2 }"
          class="gobierto-data-tab-sidebar--tab"
          @click="activateTab(2)"
        >
          <span>{{ labelQueries }}</span>
        </li>
      </ul>
    </nav>
    <div
      v-if="activeTab === 1 || activeTab === 4 && allDatasets"
    >
      <div
        v-for="(item, index) in allDatasets"
        :key="index"
        class="gobierto-data-sidebar-datasets"
      >
        <div class="gobierto-data-sidebar-datasets-links-container">
          <i
            :class="{'rotate-caret': toggle !== index }"
            class="fas fa-caret-down gobierto-data-sidebar-icon"
            @click="getColumns(item.attributes.slug, index)"
          />
          <a
            :href="item.attributes.slug"
            class="gobierto-data-sidebar-datasets-name"
            @click.prevent.stop="getData(index)"
          >{{ item.attributes.name }}
          </a>
          <div
            v-show="toggle === index"
            @active-toggle="toggle = $event"
          >
            <span
              v-for="(column, i) in columns"
              :key="i"
              :item="i"
              class="gobierto-data-sidebar-datasets-links-columns"
            >
              {{ column }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import { baseUrl } from "./../../lib/commons"
import { getUserId } from "./../../lib/helpers"
export default {
  name: "Sidebar",
  props: {
    activeTab: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      labelSets: "",
      labelQueries: "",
      labelCategories: "",
      titleDataset: '',
      slugDataset: '',
      tableName: '',
      allDatasets: null,
      numberId: '',
      columns: '',
      toggle: 0
    }
  },
  created() {
    this.userId = getUserId()
    this.labelSets = I18n.t("gobierto_data.projects.sets")
    this.labelQueries = I18n.t("gobierto_data.projects.queries")
    this.labelCategories = I18n.t("gobierto_data.projects.categories")
    this.$root.$on('activeToggle', this.activeToggle)
    this.initData()
  },
  methods: {
    initData(){
      this.endPoint = `${baseUrl}/datasets`
      axios
        .get(this.endPoint)
        .then(response => {
          this.rawData = response.data

          this.allDatasets = this.rawData.data
          this.allDatasets.sort((a, b) => a.attributes.name.localeCompare(b.attributes.name));

          this.titleDataset = this.rawData.data[0].attributes.name
          this.slugDataset = this.rawData.data[0].attributes.slug
          this.firstColumns(this.slugDataset)
          this.initAxios = true
        })
        .catch(error => {
          console.error(error)
        })
      },
    activeToggle(value){
      this.handleToggle(value)
    },
    firstColumns(slugDataset) {
      this.urlPath = location.origin
      this.endPoint = `/api/v1/data/datasets/${slugDataset}`
      this.url = `${this.urlPath}${this.endPoint}`
      axios
        .get(this.url)
        .then(response => {
          this.rawData = response.data
          this.keysData = this.rawData.data

          this.columns = Object.keys(this.keysData[0])
        })
        .catch(error => {
          console.error(error)
        })
    },
    getColumns(slugDataset, index) {
      this.handleToggle(index)
      this.caretActive = !this.caretActive;
      this.urlPath = location.origin
      this.endPoint = `/api/v1/data/datasets/${slugDataset}`
      this.url = `${this.urlPath}${this.endPoint}`
      axios
        .get(this.url)
        .then(response => {
{'fraction_non_alphanumeric': 0.15866651391912018, 'fraction_numerical': 0.005728032993470042, 'mean_word_length': 1.8025682182985554, 'pattern_counts': {'":': 0, '<': 71, '<?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': '3106091', 'n_tokens_mistral': 2760, 'n_tokens_neox': 2789, 'n_words': 414}