<commit_before><template>
  <div class="tabs-panel is-active" id="layers-active" v-cloak>

    <div class="layers-topframe scroller row">
      <div class="columns">

        <div class="row">
          <div class="switch tiny">
            <input class="switch-input" id="toggleGraticule" type="checkbox" v-bind:checked="graticule" @change="toggleGraticule" />
            <label class="switch-paddle" for="toggleGraticule">
                    <span class="show-for-sr">Display graticule</span>
                  </label>
          </div>
          <label for="toggleGraticule" class="side-label">Display graticule</label>
        </div>
        <div class="row show-for-medium">
          <div class="switch tiny">
            <input class="switch-input" id="toggleHoverInfo" type="checkbox" v-bind:checked="hoverInfo" @change="toggleHoverInfo" />
            <label class="switch-paddle" for="toggleHoverInfo">
                    <span class="show-for-sr">Display hovering feature info</span>
                  </label>
          </div>
          <label for="toggleHoverInfo" class="side-label">Display hovering feature info</label>
        </div>

        <div id="layers-active-list">
          <div v-for="l in olLayers.slice().reverse()" class="row layer-row" v-bind:class="l.progress" data-id="{{ l.get('id') }}"
            track-by="values_.id" @click="layer = getLayer(l.get('id'))">
            <div class="small-9">
              <div class="layer-title">{{ l.get("name") }} - {{ Math.round(l.getOpacity() * 100) }}%</div>
              <small v-if="l.get('updated')">Updated: {{ l.get("updated") }}</small>
            </div>
            <div class="small-3">
              <div class="text-right">
                <a @click="removeLayer(l)" class="button alert">&#x2715;</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row collapse">
      <div class="columns">
        <h4>{{ layer.name }}</h4>
        <div class="tool-slice row" v-if="mapLayer()">
          <div class="columns small-2"><label class="tool-label">Opacity:<br/>{{ layerOpacity }}%</label></div>
          <div class="columns small-10"><input type="range" min="1" max="100" step="1" v-model="layerOpacity"></div>
        </div>
        <div class="tool-slice row" v-if="layer.timeline">
          <div class="columns small-2"><label class="tool-label">Timeline:<br/>{{ timelineTS }}</label></div>
          <div class="columns small-10"><input type="range" v-bind:max="sliderMax" min="0" step="1" v-model="sliderTimeline"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { Vue, dragula } from 'src/vendor.js'
  export default {
    // variables
    data: function () {
      return {
        sliderOpacity: 0,
        layer: {},
        olLayers: [],
        hoverInfoCache: true,
        timeIndex: 0
      }
    },
    // parts of the template to be computed live
    computed: {
      graticule: {
        cache: false,
        get: function () {
          return this.$root.map.graticule && this.$root.map.graticule.getMap() === this.$root.map.olmap
        }
      },
      hoverInfo: {
        cache: false,
        get: function () {
          return this.$root.info.enabled
        },
        set: function (val) {
          this.$root.info.enabled = val
        }
      },

      sliderTimeline: {
        get: function () {
          this.timeIndex = this.mapLayer().get('timeIndex')
          return this.timeIndex
        },
        set: function (val) {
          this.mapLayer().set('timeIndex', val)
          this.timeIndex = val
        }
      },
      timelineTS: function () {
        return this.layer.timeline[this.timeIndex][0]
      },
      sliderMax: function () {
        return this.layer.timeline.length - 1
      },
      layerOpacity: {
        get: function () {
          return Math.round(this.mapLayer().getOpacity() * 100)
        },
        set: function (val) {
          this.mapLayer().setOpacity(val / 100)
        }
      }
    },
    // methods callable from inside the template
    methods: {
      activeLayers: function () {
        var catalogue = this.$root.catalogue
        var result = this.olLayers.map(function (layer) {
          var catLayer = catalogue.getLayer(layer)
          var options = {
            name: layer.get('name'),
            type: catLayer.type,
            opacity: layer.getOpacity()
          }
          return [layer.get('id'), options]<commit_msg>state saving bit better<commit_after><template>
  <div class="tabs-panel is-active" id="layers-active" v-cloak>

    <div class="layers-topframe scroller row">
      <div class="columns">

        <div class="row">
          <div class="switch tiny">
            <input class="switch-input" id="toggleGraticule" type="checkbox" v-bind:checked="graticule" @change="toggleGraticule" />
            <label class="switch-paddle" for="toggleGraticule">
                    <span class="show-for-sr">Display graticule</span>
                  </label>
          </div>
          <label for="toggleGraticule" class="side-label">Display graticule</label>
        </div>
        <div class="row show-for-medium">
          <div class="switch tiny">
            <input class="switch-input" id="toggleHoverInfo" type="checkbox" v-bind:checked="hoverInfo" @change="toggleHoverInfo" />
            <label class="switch-paddle" for="toggleHoverInfo">
                    <span class="show-for-sr">Display hovering feature info</span>
                  </label>
          </div>
          <label for="toggleHoverInfo" class="side-label">Display hovering feature info</label>
        </div>

        <div id="layers-active-list">
          <div v-for="l in olLayers.slice().reverse()" class="row layer-row" v-bind:class="l.progress" data-id="{{ l.get('id') }}"
            track-by="values_.id" @click="layer = getLayer(l.get('id'))">
            <div class="small-9">
              <div class="layer-title">{{ l.get("name") }} - {{ Math.round(l.getOpacity() * 100) }}%</div>
              <small v-if="l.get('updated')">Updated: {{ l.get("updated") }}</small>
            </div>
            <div class="small-3">
              <div class="text-right">
                <a @click="removeLayer(l)" class="button alert">&#x2715;</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row collapse">
      <div class="columns">
        <h4>{{ layer.name }}</h4>
        <div class="tool-slice row" v-if="mapLayer()">
          <div class="columns small-2"><label class="tool-label">Opacity:<br/>{{ layerOpacity }}%</label></div>
          <div class="columns small-10"><input type="range" min="1" max="100" step="1" v-model="layerOpacity"></div>
        </div>
        <div class="tool-slice row" v-if="layer.timeline">
          <div class="columns small-2"><label class="tool-label">Timeline:<br/>{{ timelineTS }}</label></div>
          <div class="columns small-10"><input type="range" v-bind:max="sliderMax" min="0" step="1" v-model="sliderTimeline"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { Vue, dragula } from 'src/vendor.js'
  export default {
    // variables
    data: function () {
      return {
        sliderOpacity: 0,
        layer: {},
        olLayers: [],
        hoverInfoCache: true,
        timeIndex: 0
      }
    },
    // parts of the template to be computed live
    computed: {
      graticule: {
        cache: false,
        get: function () {
          return this.$root.map.graticule && this.$root.map.graticule.getMap() === this.$root.map.olmap
        }
      },
      hoverInfo: {
        cache: false,
        get: function () {
          return this.$root.info.enabled
        },
        set: function (val) {
          this.$root.info.enabled = val
        }
      },

      sliderTimeline: {
        get: function () {
          this.timeIndex = this.mapLayer().get('timeIndex')
          return this.timeIndex
        },
        set: function (val) {
          this.mapLayer().set('timeIndex', val)
          this.timeIndex = val
        }
      },
      timelineTS: function () {
        return this.layer.timeline[this.timeIndex][0]
      },
      sliderMax: function () {
        return this.layer.timeline.length - 1
      },
      layerOpacity: {
        get: function () {
          return Math.round(this.mapLayer().getOpacity() * 100)
        },
        set: function (val) {
          this.mapLayer().setOpacity(val / 100)
        }
      }
    },
    // methods callable from inside the template
    methods: {
      activeLayers: function () {
        var catalogue = this.$root.catalogue
        var result = this.olLayers.map(function (layer) {
          // catlayer doesn't exist at startup, need to 
          // persist relevant catalogue entries perhaps?
          var catLayer = catalogue.getLayer(layer)
          var options = {
            id: layer.get('id'),
            name: layer.get('name'),
            type: catLayer.type,
            opacity: layer.getOpacity()
          }
          return [layer.get('id'), options]
{'fraction_non_alphanumeric': 0.16450875856816452, 'fraction_numerical': 0.0073985420520073985, 'mean_word_length': 2.0137704918032786, 'pattern_counts': {'":': 0, '<': 149, '<?xml version=': 0, '>': 149, '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': '906620', 'n_tokens_mistral': 2817, 'n_tokens_neox': 2728, 'n_words': 556}