StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics https://doi.org/10.1109/TVCG.2020.3030352
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
StackGenVis/frontend/src/components/SlidersController.vue

249 lines
11 KiB

6 years ago
<template>
<div>
5 years ago
<b-row>
<b-col cols="10">
5 years ago
<div id="WrapSliders">
<p>(1) Accuracy:<b-form-slider ref="basic1" v-model="basicValue1" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue1 }}%</p>
<p>(2*) G-Mean:<b-form-slider ref="basic2" v-model="basicValue2" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue2 }}%</p>
<p>(3*) Precision:<b-form-slider ref="basic3" v-model="basicValue3" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue3 }}%</p>
<p>(4*) Recall:<b-form-slider ref="basic4" v-model="basicValue4" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue4 }}%</p>
<p>(5*) F-Beta Score:<b-form-slider ref="basic5" v-model="basicValue5" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider >{{ basicValue5 }}%</p>
<p>(6) MCC:<b-form-slider ref="basic6" v-model="basicValue6" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue6 }}%</p>
<p>(7) ROC AUC:<b-form-slider ref="basic7" v-model="basicValue7" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue7 }}%</p>
<p>(8) Log Loss:<b-form-slider ref="basic8" v-model="basicValue8" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue8 }}%</p>
5 years ago
</div>
</b-col>
<b-col cols="2">
<br>
<br>
Deep Feature Search:
<input type="checkbox" id="toggleDeepID" data-toggle="toggle" checked="checked" data-on="Enabled" data-off="Disabled" data-size="small">
</b-col>
</b-row>
<br>
<b-row>
<b-col cols="6">
<p>(*) Average: <select id="selectFilterAverage" @change="selectAppliedFilterAverage()">
<option value="weighted" selected>Weighted (W)</option>
5 years ago
<option value="micro">Micro</option>
<option value="macro">Macro</option>
</select></p>
</b-col>
<b-col cols="6">
<p>(5) Beta Value: <select id="selectFilterBeta" @change="selectAppliedFilterBeta()">
5 years ago
<option value="one" selected>F1 Score</option>
<option value="half">F0.5 Score</option>
<option value="two">F2 Score</option>
</select></p>
</b-col>
</b-row>
</div>
6 years ago
</template>
<script>
import $ from 'jquery'
import { bootstrapToggle } from 'bootstrap-toggle'
import 'bootstrap-toggle/css/bootstrap-toggle.css'
6 years ago
import bFormSlider from 'vue-bootstrap-slider/es/form-slider';
import 'bootstrap-slider/dist/css/bootstrap-slider.css'
import { EventBus } from '../main.js'
export default {
name: 'SlidersController',
data () {
5 years ago
return {
basicValue1: 100,
basicValue2: 100,
basicValue3: 100,
basicValue4: 100,
basicValue5: 100,
basicValue6: 100,
basicValue7: 100,
basicValue8: 100,
factorsLocal: [1,0,0
5 years ago
,1,0,0,1,0
,0,1,0,0,0
,0,0,1,0,0
,0,1,1,1
],
userSelectedFilterAver: 'weighted',
userSelectedFilterBeta: 'one'
}
6 years ago
},
methods: {
5 years ago
selectAppliedFilterAverage () {
var representationSelectionDocum = document.getElementById('selectFilterAverage')
this.userSelectedFilterAver = representationSelectionDocum.options[representationSelectionDocum.selectedIndex].value
this.slideStop()
},
selectAppliedFilterBeta () {
var representationSelectionDocum = document.getElementById('selectFilterBeta')
this.userSelectedFilterBeta = representationSelectionDocum.options[representationSelectionDocum.selectedIndex].value
this.slideStop()
},
slideStart () {
},
slideStop () {
if (this.userSelectedFilterAver == 'micro') {
this.factorsLocal[1] = this.basicValue2/100
this.factorsLocal[2] = 0
this.factorsLocal[3] = 0
this.factorsLocal[4] = this.basicValue3/100
5 years ago
this.factorsLocal[5] = 0
this.factorsLocal[6] = 0
this.factorsLocal[7] = this.basicValue4/100
5 years ago
this.factorsLocal[8] = 0
this.factorsLocal[9] = 0
5 years ago
if (this.userSelectedFilterBeta == 'half') {
this.factorsLocal[10] = this.basicValue5/100
this.factorsLocal[11] = 0
this.factorsLocal[12] = 0
5 years ago
this.factorsLocal[13] = 0
this.factorsLocal[14] = 0
this.factorsLocal[15] = 0
this.factorsLocal[16] = 0
this.factorsLocal[17] = 0
this.factorsLocal[28] = 0
5 years ago
} else if (this.userSelectedFilterBeta == 'two') {
this.factorsLocal[10] = 0
this.factorsLocal[11] = 0
5 years ago
this.factorsLocal[12] = 0
this.factorsLocal[13] = 0
this.factorsLocal[14] = 0
this.factorsLocal[15] = 0
this.factorsLocal[16] = this.basicValue5/100
5 years ago
this.factorsLocal[17] = 0
this.factorsLocal[18] = 0
5 years ago
} else {
this.factorsLocal[10] = 0
this.factorsLocal[11] = 0
5 years ago
this.factorsLocal[12] = 0
this.factorsLocal[13] = this.basicValue5/100
5 years ago
this.factorsLocal[14] = 0
this.factorsLocal[15] = 0
5 years ago
this.factorsLocal[16] = 0
this.factorsLocal[17] = 0
this.factorsLocal[18] = 0
}
} else if (this.userSelectedFilterAver == 'macro') {
this.factorsLocal[1] = 0
this.factorsLocal[2] = this.basicValue2/100
5 years ago
this.factorsLocal[3] = 0
this.factorsLocal[4] = 0
this.factorsLocal[5] = this.basicValue3/100
5 years ago
this.factorsLocal[6] = 0
this.factorsLocal[7] = 0
this.factorsLocal[8] = this.basicValue4/100
5 years ago
this.factorsLocal[9] = 0
if (this.userSelectedFilterBeta == 'half') {
this.factorsLocal[10] = 0
this.factorsLocal[11] = this.basicValue5/100
5 years ago
this.factorsLocal[12] = 0
this.factorsLocal[13] = 0
5 years ago
this.factorsLocal[14] = 0
this.factorsLocal[15] = 0
this.factorsLocal[16] = 0
this.factorsLocal[17] = 0
this.factorsLocal[18] = 0
} else if (this.userSelectedFilterBeta == 'two') {
this.factorsLocal[10] = 0
this.factorsLocal[11] = 0
5 years ago
this.factorsLocal[12] = 0
this.factorsLocal[13] = 0
this.factorsLocal[14] = 0
this.factorsLocal[15] = 0
this.factorsLocal[16] = 0
this.factorsLocal[17] = this.basicValue5/100
5 years ago
this.factorsLocal[18] = 0
} else {
this.factorsLocal[10] = 0
this.factorsLocal[11] = 0
5 years ago
this.factorsLocal[12] = 0
this.factorsLocal[13] = 0
this.factorsLocal[14] = this.basicValue5/100
5 years ago
this.factorsLocal[15] = 0
this.factorsLocal[16] = 0
5 years ago
this.factorsLocal[17] = 0
this.factorsLocal[18] = 0
}
} else {
this.factorsLocal[1] = 0
this.factorsLocal[2] = 0
this.factorsLocal[3] = this.basicValue2/100
5 years ago
this.factorsLocal[4] = 0
this.factorsLocal[5] = 0
this.factorsLocal[6] = this.basicValue3/100
5 years ago
this.factorsLocal[7] = 0
this.factorsLocal[8] = 0
this.factorsLocal[9] = this.basicValue4/100
5 years ago
if (this.userSelectedFilterBeta == 'half') {
this.factorsLocal[10] = 0
this.factorsLocal[11] = 0
this.factorsLocal[12] = this.basicValue5/100
5 years ago
this.factorsLocal[13] = 0
this.factorsLocal[14] = 0
5 years ago
this.factorsLocal[15] = 0
this.factorsLocal[16] = 0
this.factorsLocal[17] = 0
this.factorsLocal[18] = 0
} else if (this.userSelectedFilterBeta == 'two') {
this.factorsLocal[10] = 0
this.factorsLocal[11] = 0
5 years ago
this.factorsLocal[12] = 0
this.factorsLocal[13] = 0
this.factorsLocal[14] = 0
this.factorsLocal[15] = 0
this.factorsLocal[16] = 0
this.factorsLocal[17] = 0
this.factorsLocal[18] = this.basicValue5/100
5 years ago
} else {
this.factorsLocal[10] = 0
this.factorsLocal[11] = 0
5 years ago
this.factorsLocal[12] = 0
this.factorsLocal[13] = 0
this.factorsLocal[14] = 0
this.factorsLocal[15] = this.basicValue5/100
5 years ago
this.factorsLocal[16] = 0
this.factorsLocal[17] = 0
5 years ago
this.factorsLocal[18] = 0
}
}
this.factorsLocal[0] = this.basicValue1/100
this.factorsLocal[19] = this.basicValue6/100
this.factorsLocal[20] = this.basicValue7/100
5 years ago
this.factorsLocal[21] = this.basicValue8/100
EventBus.$emit('CallFactorsView', this.factorsLocal)
},
6 years ago
},
mounted () {
$('#toggleDeepID').bootstrapToggle({
on: 'I',
off: '0',
width: '50%',
});
$('#toggleDeepID').change(function() {
var toggleDeepSlid = document.getElementById('toggleDeepID')
if (toggleDeepSlid.checked === false) {
EventBus.$emit('toggleDeep', 0)
} else {
EventBus.$emit('toggleDeep', 1)
}
})
}
6 years ago
}
</script>
6 years ago
<style>
p {
margin: 0 !important;
padding: 0 !important;
}
5 years ago
/*.slider.slider-horizontal {
width: 300px !important;
}*/
6 years ago
.slider-handle {
background: black;
}
</style>