PyCS/webui/src/components/projects/project-labels-window.vue

<template>
  <div class="project-labels-window">
    <div class="label" v-for="label in labels" :key="label.id">
      <h2>
        <img alt="delete" src="@/assets/icons/x-circle.svg" @click="removeLabel(label.id)">
        {{ label.name }}
      </h2>

      <media-selector v-if="labeledImages[label.id].length > 0"
                      :project-id="currentProject.id"
                      :media="labeledImages[label.id]"
                      current="-1"
                      :socket="socket"></media-selector>
      <div v-else
           class="no-elements">
        No labeled images found...
      </div>
    </div>

    <div class="label">
      <text-input placeholder="New Label"
                  v-model="createLabelValue"
                  @change="createLabel"
                  @enter="createLabel"/>
    </div>
  </div>
</template>

<script>
import TextInput from "@/components/base/text-input";
import MediaSelector from "@/components/media/media-selector";

export default {
  name: "project-labels-window",
  components: {MediaSelector, TextInput},
  props: ['currentProject', 'socket'],
  data: function () {
    return {
      createLabelValue: ''
    }
  },
  computed: {
    labels: function () {
      let labels = Object.keys(this.currentProject.labels)
          .map(e => this.currentProject.labels[e]);
      labels.sort((a, b) => a.name < b.name ? -1 : +1);

      return labels;
    },
    labeledImages: function () {
      const result = {};

      for (let label of this.labels)
        result[label.id] = [];

      for (let image of Object.values(this.currentProject.data)) {
        for (let prediction of Object.values(image['predictionResults'])) {
          if ('label' in prediction && !result[prediction.label].includes(image)) {
            result[prediction.label].push(image);
          }
        }
      }

      return result;
    }
  },
  methods: {
    createLabel: function (value) {
      if (!this.createLabelValue)
        return;

      this.socket.post('/projects/' + this.currentProject.id + '/labels', {name: value});
      this.createLabelValue = '';
    },
    removeLabel: function (id) {
      this.socket.post('/projects/' + this.currentProject.id + '/labels/' + id, {delete: true});
    }
  }
}
</script>

<style scoped>
.project-labels-window {
  padding: 1rem;
}

.label {
  margin-bottom: 1rem;
}

h2 {
  display: flex;
  align-items: center;
  margin: 0;
}

img {
  width: 1.5rem;
  margin-right: 0.75rem;
}

/deep/ .element {
  border: none;
}

/deep/ .element:not(:first-child) {
  margin-left: 0.1rem;
}

/deep/ .element:not(:last-child) {
  margin-right: 0.1rem;
}

.no-elements {
  margin-top: 0.5rem;
}
</style>