PyCS/webui/src/components/projects/settings/model-interaction-settings.vue

<template>
  <div class="model-interaction-settings">
    <model-abilities :model="model"/>

    <div class="predict">
      <h3>Predict</h3>
      <button-row>
        <button-input :type="running ? 'disabled' : 'primary'"
                      @click="predict('new')">
          new
          <loading-icon v-if="running"/>
        </button-input>

        <button-input :type="running ? 'disabled' : 'primary'"
                      @click="predict('all')">
          all
          <loading-icon v-if="running"/>
        </button-input>
      </button-row>
    </div>

    <div class="download">
      <h3>Download Predictions</h3>
      <button-input type="primary"
                    @click="download">
        download
      </button-input>
    </div>

    <div v-if="supported.fit" class="fit">
      <h3>Fit</h3>
      <button-input :type="running ? 'disabled' : 'primary'"
                    @click="fit">
        run
        <loading-icon v-if="running"/>
      </button-input>
    </div>
  </div>

  <!-- TODO model description -->
</template>

<script>
import ButtonInput from "@/components/base/button-input";
import LoadingIcon from "@/components/base/loading-icon";
import ButtonRow from "@/components/base/button-row";
import ModelAbilities from "@/components/models/model-abilities";

export default {
  name: "model-interaction-settings",
  components: {ModelAbilities, ButtonRow, LoadingIcon, ButtonInput},
  props: ['model', 'jobs'],
  computed: {
    supported: function () {
      return {
        fit: this.model.supports.includes('fit')
      }
    },
    running: function () {
      return this.jobs.filter(j => !j.finished && j.type === 'Model Interaction').length > 0;
    }
  },
  methods: {
    predict: function (name) {
      // TODO then / error
      this.$root.socket.post(`/projects/${this.$root.project.id}/pipelines/predict`, {
        predict: name
      });
    },
    download: function () {
      window.location.href = this.$root.socket.url(`/projects/${this.$root.project.id}/results`);
    },
    fit: function () {
      // TODO then / error
      this.$root.socket.post(`/projects/${this.$root.project.id}/pipelines/fit`, {
        fit: true
      });
    }
  }
}
</script>

<style scoped>
.model-interaction-settings {
  font-size: 80%;
}

h3 {
  margin-bottom: 0.2rem;
}

.loading-icon {
  float: right;
  width: 1.3rem;
  height: 1.3rem;
  margin: -0.15rem -0.4rem -0.15rem 0.5rem;
}
</style>