CorrelationAnalysis.vue 1.74 KB
Newer Older
1
<template>
2
3
  <div>
    <div class="data-box-container">
4
5
6
7
8
9
10
11
      <data-box header="X and Y variables"
                dataType="numerical"
                v-on:update="update_xyData">
      </data-box>
      <data-box header="Annotations"
                dataType="categorical"
                v-on:update="update_annotationData">
      </data-box>
12
    </div>
13
14
15
16
17
18
    <input
        id="run-analysis-btn"
        type="button"
        @click="createPlot"
        value="Run Analysis"
        :disabled="disabled"/>
19
  </div>
20
21
22
23
</template>


<script>
24
25
26
27
  import DataBox from '../DataBox.vue'
  import requestHandling from '../mixins/request-handling'
  export default {
    name: 'correlation-analysis',
28
    data () {
29
      return {
30
31
32
33
34
35
36
        xyData: [],
        annotationData: [],
        get args () {
          return {
            x: `$${this.xyData[0]}$`,
            y: `$${this.xyData[1]}$`
          }
37
38
39
        }
      }
    },
40
41
42
43
44
    computed: {
      disabled () {
        return this.xyData.length !== 2
      }
    },
45
46
47
48
49
50
51
    components: {
      DataBox
    },
    mixins: [
      requestHandling
    ],
    methods: {
52
      createPlot () {
53
        // function made available via requestHandling mixin
54
        this.runAnalysis({job_name: 'compute-correlation', args: this.args})
55
56
57
58
59
60
          .then(response => {
            console.log(response)
          })
          .catch(error => {
            console.error(error)
          })
61
62
63
64
65
66
      },
      update_xyData (ids) {
        this.xyData = ids
      },
      update_annotationData (ids) {
        this.annotationData = ids
67
      }
68
69
70
71
72
73
    }
  }
</script>


<style scoped>
74
75
76
77
78
  .data-box-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
79

80
81
82
83
  #run-analysis-btn {
    width: 100%;
    height: 20px;
  }
84
</style>