PyCS/webui/src/components/projects/project-model-interaction-window.vue

<template>
  <div class="project-model-interaction-window">
    <h1 class="headline">Model</h1>

    <h2>Predictions</h2>
    <button-row>
      <button-input type="primary"
                    @click="predictUnlabeled">predict unlabeled
      </button-input>
      <button-input type="primary"
                    @click="predictAll">predict all
      </button-input>
      <button-input type="primary"
                    @click="download">download predictions
      </button-input>
    </button-row>

    <h2>Fit</h2>
    <div>
      <button-input type="primary"
                    @click="fit">fit model with new data
      </button-input>
    </div>
  </div>
</template>

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

export default {
  name: "project-model-interaction-window",
  components: {ButtonRow, ButtonInput},
  props: ['currentProject', 'socket'],
  methods: {
    predictUnlabeled: function () {
      this.socket.post('/projects/' + this.currentProject.id, {'predictUnlabeled': true});
    },
    predictAll: function () {
      this.socket.post('/projects/' + this.currentProject.id, {'predictAll': true});
    },
    fit: function () {
      this.socket.post('/projects/' + this.currentProject.id, {'fit': true});
    },
    download: function () {
      window.location.href = this.socket.baseurl + '/projects/' + this.currentProject.id + '/predictions'
    }
  }
}
</script>

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

.project-model-interaction-window > div {
  margin-bottom: 1rem;
}

h2 {
  margin-bottom: 0.5rem;
}
</style>