PyCS/webui/src/components/media/media-control.vue

<template>
  <div class="media-control">
    <button-input type="transparent"
                  style="color: var(--on_error)"
                  :class="{disabled: !hasNext}"
                  @click="$emit('control', !control)">
      {{ control ? '&#9660;' : '&#9650;' }}
    </button-input>

    <button-input type="transparent"
                  style="color: var(--on_error)"
                  :class="{disabled: !hasPrevious}"
                  @click="previous">
      &lt;
    </button-input>

    <button-row class="media-control">
      <button-input type="primary"
                    style="color: var(--on_error)"
                    @click="reset">
        Reset
      </button-input>
      <button-input type="primary"
                    style="color: var(--on_error)"
                    @click="$emit('predict', 'current')">
        Predict
      </button-input>
    </button-row>

    <button-input type="transparent"
                  style="color: var(--on_error)"
                  :class="{disabled: !hasNext}"
                  @click="next">
      &gt;
    </button-input>

    <button-input type="transparent" v-if="project.model.supports.includes('labeled-images')">
      <img alt="label" src="@/assets/icons/tag.svg"
           :class="{tagged: currentLabel}"
           @touchstart.stop @mousedown.stop
           @click.stop="showLabelSelection = true">
    </button-input>

    <select v-if="showLabelSelection"
            @touchstart.stop @mousedown.stop
            @change="labelSelf"
            @focusout="showLabelSelection = false">
      <option value="">None</option>

      <option v-for="label in labelList"
              :key="label.id"
              :value="label.id"
              :selected="label === currentLabel">
        {{ label.name }}
      </option>
    </select>

    <button-input type="transparent" v-if="project.model.supports.includes('bounding-boxes') || project.model.supports.includes('labeled-bounding-boxes')">
      <img alt="label" src="@/assets/icons/people.svg"
           @touchstart.stop @mousedown.stop
           @click.stop="showFilterSelection = true">
    </button-input>

    <select v-if="showFilterSelection"
            @touchstart.stop @mousedown.stop
            @change="filterSelf"
            @focusout="showFilterSelection = false">
      <option :selected="this.filter === ''" value="">None</option>
      <option :selected="this.filter === 'user'" value="user">User</option>
      <option :selected="this.filter === 'pipeline'" value="pipeline">Pipeline</option>
    </select>

    <button-input type="transparent"
                  v-if="!extremeClicking && (project.model.supports.includes('bounding-boxes') || project.model.supports.includes('labeled-bounding-boxes'))">
      <img alt="label" src="@/assets/icons/flame.svg"
           @touchstart.stop @mousedown.stop
           @click.stop="$emit('extremeClicking', true)">
    </button-input>

    <button-input type="transparent" v-if="extremeClicking">
      <img alt="label" src="@/assets/icons/check.svg"
           @touchstart.stop @mousedown.stop
           @click.stop="$emit('extremeClicking', false)">
    </button-input>
  </div>

</template>

<script>
import ButtonInput from "@/components/base/button-input";
import ButtonRow from "@/components/base/button-row";

export default {
  name: "media-control",
  components: {ButtonRow, ButtonInput},
  props: ['hasPrevious', 'hasNext', 'control', 'data', 'project', 'socket', 'filter', 'extremeClicking'],
  data: function () {
    return {
      showLabelSelection: false,
      showFilterSelection: false
    }
  },
  computed: {
    mediaUrl: function () {
      return this.socket.media(this.project.id, this.data.id);
    },
    labelList: function () {
      return Object.keys(this.project.labels).map(key => this.project.labels[key]);
    },
    currentLabel: function () {
      const predictions = Object.keys(this.data.predictionResults).map(k => this.data.predictionResults[k]);
      for (let result of predictions) {
        if (!('x' in result || 'y' in result || 'w' in result || 'h' in result)) {
          return this.project.labels[result.label];
        }
      }

      return false;
    }
  },
  methods: {
    previous: function () {
      if (this.hasPrevious)
        this.$emit('previous', null);
    },
    next: function () {
      if (this.hasNext)
        this.$emit('next', null);
    },
    labelSelf: function (event) {
      const options = event.target.options;
      const option = options[options.selectedIndex];
      const value = option.value;

      this.socket.post(this.mediaUrl, {
        label: value ? value : false
      });
      this.showLabelSelection = false;
    },
    filterSelf: function (event) {
      this.$emit('filter', event.target.value);
    },
    reset: function () {
      this.socket.post(this.mediaUrl, {
        reset: true
      });
    }
  }
}
</script>

<style scoped>
.media-control {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.5rem;
}

.disabled {
  opacity: 0.4;
}

img {
  filter: invert(1);
  opacity: 0.4;
}

img.tagged {
  opacity: 1;
}

select {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>