VisEvol: Visual Analytics to Support Hyperparameter Search through Evolutionary Optimization
https://doi.org/10.1111/cgf.14300
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.
1052 lines
38 KiB
1052 lines
38 KiB
<!-- Main Visualization View -->
|
|
|
|
<template>
|
|
<body>
|
|
<b-container fluid class="bv-example-row">
|
|
<b-row class="md-3">
|
|
<b-col cols="3" >
|
|
<mdb-card>
|
|
<mdb-card-header color="primary-color" tag="h5" class="text-center">Data Sets and Performance Metrics Manager</mdb-card-header>
|
|
<mdb-card-body>
|
|
<mdb-card-text class="text-left" style="font-size: 18.5px;">
|
|
<PerformanceMetrics/>
|
|
<DataSetExecController/>
|
|
</mdb-card-text>
|
|
</mdb-card-body>
|
|
</mdb-card>
|
|
</b-col>
|
|
<b-col cols="6">
|
|
<mdb-card>
|
|
<mdb-card-header color="primary-color" tag="h5" class="text-center">Provenance</mdb-card-header>
|
|
<mdb-card-body>
|
|
<mdb-card-text class="text-left" style="font-size: 18.5px; min-height: 230px">
|
|
</mdb-card-text>
|
|
</mdb-card-body>
|
|
</mdb-card>
|
|
</b-col>
|
|
<b-col cols="3">
|
|
<mdb-card >
|
|
<mdb-card-header color="primary-color" tag="h5" class="text-center">Majority-Voting Results</mdb-card-header>
|
|
<mdb-card-body>
|
|
<mdb-card-text class="text-left" style="font-size: 18.5px; min-height: 230px">
|
|
</mdb-card-text>
|
|
</mdb-card-body>
|
|
</mdb-card>
|
|
</b-col>
|
|
</b-row>
|
|
<!--
|
|
<hr/>
|
|
<ul class="nav nav-tabs" id="myTab" role="tablist" style="margin-top: 15px">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Algorithms' Exploration</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Data Wrangling</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Models' Exploration</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent">
|
|
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
|
|
<b-row class="md-3">
|
|
<b-col cols="3">
|
|
<mdb-card style="margin-top: 15px">
|
|
<mdb-card-header color="primary-color" tag="h5" class="text-center">Overview of the Algorithms' Space</mdb-card-header>
|
|
<mdb-card-body class="text-center">
|
|
<Parameters/>
|
|
</mdb-card-body>
|
|
</mdb-card>
|
|
</b-col>
|
|
<b-col cols="9">
|
|
<mdb-card style="margin-top: 15px;">
|
|
<mdb-card-header color="primary-color" tag="h5" class="text-center"><small class="float-left" style="padding-top: 3px;">Metrics Support: [All]</small>Performance of the Algorithms [Sel: {{valueSel}} / All: {{valueAll}}]<small class="float-right" style="font-size:85% !important"><Controller/></small></mdb-card-header>
|
|
<mdb-card-body>
|
|
<Algorithms :width="width" :height="height"/>
|
|
</mdb-card-body>
|
|
</mdb-card>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="md-3">
|
|
<b-col cols="3">
|
|
<mdb-card style="margin-top: 15px">
|
|
<mdb-card-header color="primary-color" tag="h5" class="text-center"><small class="float-left" style="padding-top: 3px;">Metrics Support: [All]</small>Parameters Manipulation for Each Algorithm</mdb-card-header>
|
|
<mdb-card-body>
|
|
<AlgorithmHyperParam/>
|
|
</mdb-card-body>
|
|
</mdb-card>
|
|
</b-col>
|
|
<b-col cols="9">
|
|
<mdb-card style="margin-top: 15px;">
|
|
<mdb-card-header color="primary-color" tag="h5" class="text-center"><small class="float-left" style="padding-top: 3px;"><font-awesome-icon class="fa-lg" icon="dice-three"/> Metrics Support: [M3*, M4*, M5* (F1 Score)]</small>Performance of the Algorithms for Each Class<small class="float-right"><ResetClass/></small></mdb-card-header>
|
|
<mdb-card-body>
|
|
<BarChart/>
|
|
</mdb-card-body>
|
|
</mdb-card>
|
|
</b-col>
|
|
</b-row>
|
|
</div>
|
|
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
|
|
<b-row class="md-3">
|
|
<b-col cols="6">
|
|
<mdb-card style="margin-top: 15px;">
|
|
<mdb-card-header color="primary-color" tag="h5" class="text-center">Data Space<small class="float-right"><saveStack/></small></mdb-card-header>
|
|
<mdb-card-body>
|
|
<mdb-card-text class="text-center" style="min-height: 822px">
|
|
<DataSpace/>
|
|
<PCPData/>
|
|
</mdb-card-text>
|
|
</mdb-card-body>
|
|
</mdb-card>
|
|
</b-col>
|
|
<b-col cols="6">
|
|
<mdb-card style="margin-top: 15px;">
|
|
<mdb-card-header color="primary-color" tag="h5" class="text-center">Features Selection for Each Model<small class="float-right"><active/></small></mdb-card-header>
|
|
<mdb-card-body>
|
|
<mdb-card-text class="text-center" style="min-height: 822px">
|
|
<ToggleSelection/>
|
|
<br/>
|
|
<Heatmap/>
|
|
</mdb-card-text>
|
|
</mdb-card-body>
|
|
</mdb-card>
|
|
</b-col>
|
|
</b-row>
|
|
</div>
|
|
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
|
|
-->
|
|
<b-row class="md-3">
|
|
<b-col cols="6">
|
|
<mdb-card style="margin-top: 15px;">
|
|
<mdb-card-header color="primary-color" tag="h5" class="text-center">Hyper-Parameters' Space
|
|
[Sel: {{OverSelLength}} / All: {{OverAllLength}}]<small class="float-right"><active-scatter/></small>
|
|
</mdb-card-header>
|
|
<mdb-card-body>
|
|
<mdb-card-text class="text-center" style="min-height: 600px">
|
|
<HyperParameterSpace/>
|
|
</mdb-card-text>
|
|
</mdb-card-body>
|
|
</mdb-card>
|
|
</b-col>
|
|
<b-col cols="6">
|
|
<mdb-card style="margin-top: 15px;">
|
|
<mdb-card-header color="primary-color" tag="h5" class="text-center">Majority-Voting Ensemble
|
|
[Sel: {{OverSelLengthCM}} / All: {{OverAllLengthCM}}]<small class="float-right"><active-scatter/></small>
|
|
</mdb-card-header>
|
|
<mdb-card-body>
|
|
<mdb-card-text class="text-center" style="min-height: 600px">
|
|
<Ensemble/>
|
|
</mdb-card-text>
|
|
</mdb-card-body>
|
|
</mdb-card>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="md-3">
|
|
<b-col cols="6">
|
|
<mdb-card style="margin-top: 15px;">
|
|
<mdb-card-header color="primary-color" tag="h5" class="text-center">Hyper-Parameters' Predictions
|
|
</mdb-card-header>
|
|
<mdb-card-body>
|
|
<mdb-card-text class="text-center" style="min-height: 270px">
|
|
<Predictions/>
|
|
</mdb-card-text>
|
|
</mdb-card-body>
|
|
</mdb-card>
|
|
</b-col>
|
|
<b-col cols="6">
|
|
<mdb-card style="margin-top: 15px;">
|
|
<mdb-card-header color="primary-color" tag="h5" class="text-center">Majority-Voting Ensemble's Predictions
|
|
</mdb-card-header>
|
|
<mdb-card-body>
|
|
<mdb-card-text class="text-center" style="min-height: 270px">
|
|
<PredictionsCM/>
|
|
</mdb-card-text>
|
|
</mdb-card-body>
|
|
</mdb-card>
|
|
</b-col>
|
|
</b-row>
|
|
</b-container>
|
|
</body>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import Vue from 'vue'
|
|
import DataSetExecController from './DataSetExecController.vue'
|
|
import PerformanceMetrics from './PerformanceMetrics.vue'
|
|
import Algorithms from './Algorithms.vue'
|
|
import AlgorithmHyperParam from './AlgorithmHyperParam.vue'
|
|
import HyperParameterSpace from './HyperParameterSpace.vue'
|
|
import Ensemble from './Ensemble.vue'
|
|
import VotingResults from './VotingResults.vue'
|
|
import Parameters from './Parameters.vue'
|
|
import Predictions from './Predictions.vue'
|
|
import PredictionsCM from './PredictionsCM.vue'
|
|
import axios from 'axios'
|
|
import { loadProgressBar } from 'axios-progress-bar'
|
|
import 'axios-progress-bar/dist/nprogress.css'
|
|
import 'bootstrap-css-only/css/bootstrap.min.css'
|
|
import { mdbCard, mdbCardBody, mdbCardText, mdbCardHeader } from 'mdbvue'
|
|
import { EventBus } from '../main.js'
|
|
import * as jQuery from 'jquery'
|
|
import $ from 'jquery'
|
|
import * as d3Base from 'd3'
|
|
import Papa from 'papaparse'
|
|
|
|
// attach all d3 plugins to the d3 library
|
|
const d3 = Object.assign(d3Base)
|
|
|
|
export default Vue.extend({
|
|
name: 'Main',
|
|
components: {
|
|
DataSetExecController,
|
|
PerformanceMetrics,
|
|
Algorithms,
|
|
AlgorithmHyperParam,
|
|
HyperParameterSpace,
|
|
Ensemble,
|
|
Parameters,
|
|
Predictions,
|
|
PredictionsCM,
|
|
VotingResults,
|
|
mdbCard,
|
|
mdbCardBody,
|
|
mdbCardHeader,
|
|
mdbCardText
|
|
},
|
|
data () {
|
|
return {
|
|
storeEnsemble: [],
|
|
PredictSelEnsem: [],
|
|
firstTimeExec: true,
|
|
unselectedRemainingPoints: [],
|
|
unselectedRemainingPointsEnsem: [],
|
|
Collection: 0,
|
|
OverviewResults: 0,
|
|
preDataResults: '',
|
|
DataResults: '',
|
|
keyNow: 1,
|
|
instancesImportance: '',
|
|
RetrieveValueFile: 'HeartC', // this is for the default data set
|
|
ClassifierIDsList: [],
|
|
ClassifierIDsListCM: [],
|
|
SelectedFeaturesPerClassifier: '',
|
|
FinalResults: 0,
|
|
Algorithms: ['KNN','LR'],
|
|
selectedAlgorithm: '',
|
|
PerformancePerModel: '',
|
|
PerformanceCheck: '',
|
|
firstTimeFlag: 1,
|
|
selectedModels_Stack: [],
|
|
selectedAlgorithms: ['KNN','LR'],
|
|
parametersofModels: [],
|
|
reset: false,
|
|
brushedBoxPlotUpdate: 0,
|
|
width: 0,
|
|
height: 0,
|
|
combineWH: [],
|
|
basicValuesFact: [1,1,1,1,0,0,0,0],
|
|
sumPerClassifier: [],
|
|
valueSel: 0,
|
|
valueAll: 0,
|
|
OverSelLength: 0,
|
|
OverAllLength: 0,
|
|
OverSelLengthCM: 0,
|
|
OverAllLengthCM: 0,
|
|
modelsUpdate: [],
|
|
AlgorithmsUpdate: [],
|
|
SelectedMetricsForModels: [],
|
|
DataPointsSel: '',
|
|
DataPointsModels: '',
|
|
dataPointsSelfromDataSpace: '',
|
|
userSelectedFilterMain: 'mean',
|
|
actionData: '',
|
|
filterData: '',
|
|
provenanceData: '',
|
|
localFile: '',
|
|
toggleDeepMain: 1,
|
|
keyLoc: 0,
|
|
keyData: true,
|
|
ClassifierIDsListRemaining: [],
|
|
PredictSel: []
|
|
}
|
|
},
|
|
methods: {
|
|
openModalFun () {
|
|
$('#myModal').modal('show')
|
|
},
|
|
closeModalFun () {
|
|
$('#myModal').modal('hide')
|
|
},
|
|
getCollection () {
|
|
this.Collection = this.getCollectionFromBackend()
|
|
},
|
|
getCollectionFromBackend () {
|
|
const path = `http://localhost:5000/data/ClientRequest`
|
|
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.get(path, axiosConfig)
|
|
.then(response => {
|
|
this.Collection = response.data.Collection
|
|
EventBus.$emit('emittedEventCallingDataPlot', this.Collection)
|
|
console.log('Collection was overwritten with new data sent by the server!')
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
getDatafromtheBackEnd () {
|
|
const path = `http://localhost:5000/data/PlotClassifiers`
|
|
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.get(path, axiosConfig)
|
|
.then(response => {
|
|
this.OverviewResults = response.data.OverviewResults
|
|
console.log('Server successfully sent all the data related to visualizations!')
|
|
if (this.firstTimeExec) {
|
|
EventBus.$emit('emittedEventCallingScatterPlot', this.OverviewResults)
|
|
EventBus.$emit('emittedEventCallingGrid', this.OverviewResults)
|
|
EventBus.$emit('emittedEventCallingGridSelection', this.OverviewResults)
|
|
this.firstTimeExec = false
|
|
} else {
|
|
this.PredictSelEnsem = []
|
|
EventBus.$emit('SendSelectedPointsToServerEventCM', this.PredictSelEnsem)
|
|
EventBus.$emit('emittedEventCallingCrossoverMutation', this.OverviewResults)
|
|
EventBus.$emit('emittedEventCallingGridCrossoverMutation', this.OverviewResults)
|
|
EventBus.$emit('emittedEventCallingGridSelectionCrossoverMutation', this.OverviewResults)
|
|
//this.getFinalResults()
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
getCMComputedData () {
|
|
const path = `http://localhost:5000/data/PlotCrossMutate`
|
|
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.get(path, axiosConfig)
|
|
.then(response => {
|
|
this.OverviewResultsCM = response.data.OverviewResultsCM
|
|
console.log('Server successfully sent all the data related to visualizations!')
|
|
this.PredictSel = []
|
|
EventBus.$emit('SendSelectedPointsToServerEvent', this.PredictSel)
|
|
EventBus.$emit('emittedEventCallingScatterPlot', this.OverviewResultsCM)
|
|
EventBus.$emit('emittedEventCallingGrid', this.OverviewResultsCM)
|
|
EventBus.$emit('emittedEventCallingGridSelection', this.OverviewResultsCM)
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
SendToServerData () {
|
|
const path = `http://127.0.0.1:5000/data/SendtoSeverDataSet`
|
|
|
|
const postData = {
|
|
uploadedData: this.localFile
|
|
}
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.post(path, postData, axiosConfig)
|
|
.then(response => {
|
|
console.log('Sent the new uploaded data to the server!')
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
SelectedPoints () {
|
|
this.OverSelLength = this.ClassifierIDsList.length
|
|
this.SendSelectedIDs()
|
|
},
|
|
SendSelectedIDs () {
|
|
const path = `http://127.0.0.1:5000/data/SendtoSeverSelIDs`
|
|
const postData = {
|
|
predictSelectionIDs: this.ClassifierIDsList
|
|
}
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.post(path, postData, axiosConfig)
|
|
.then(response => {
|
|
console.log('Sent the selected IDs to compute predictions!')
|
|
this.retrievePredictionsSel()
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
retrievePredictionsSel () {
|
|
const path = `http://localhost:5000/data/RetrievePredictions`
|
|
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.get(path, axiosConfig)
|
|
.then(response => {
|
|
this.PredictSel = response.data.PredictSel
|
|
console.log('Server successfully sent the predictions!')
|
|
EventBus.$emit('SendSelectedPointsToServerEvent', this.PredictSel)
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
SendSelectedIDsEnsemble () {
|
|
const path = `http://127.0.0.1:5000/data/SendtoSeverSelIDsEnsem`
|
|
const postData = {
|
|
predictSelectionIDsCM: this.ClassifierIDsListCM
|
|
}
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.post(path, postData, axiosConfig)
|
|
.then(response => {
|
|
console.log('Sent the selected IDs to compute predictions!')
|
|
this.retrievePredictionsSelEnsemble()
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
retrievePredictionsSelEnsemble () {
|
|
const path = `http://localhost:5000/data/RetrievePredictionsEnsem`
|
|
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.get(path, axiosConfig)
|
|
.then(response => {
|
|
this.PredictSelEnsem = response.data.PredictSelEnsem
|
|
console.log('Server successfully sent the predictions!')
|
|
EventBus.$emit('SendSelectedPointsToServerEventCM', this.PredictSelEnsem)
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
SelectedPointsCM () {
|
|
this.OverSelLengthCM = this.ClassifierIDsListCM.length
|
|
this.SendSelectedIDsEnsemble()
|
|
},
|
|
SendSelectedPointsToServer () {
|
|
if (this.ClassifierIDsList === ''){
|
|
this.OverSelLength = 0
|
|
EventBus.$emit('resetViews')
|
|
} else {
|
|
this.OverSelLength = this.ClassifierIDsList.length
|
|
const path = `http://127.0.0.1:5000/data/ServerRequestSelPoin`
|
|
const postData = {
|
|
ClassifiersList: this.ClassifierIDsList,
|
|
keyNow: this.keyNow,
|
|
}
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.post(path, postData, axiosConfig)
|
|
.then(response => {
|
|
console.log('Sent the selected points to the server (scatterplot)!')
|
|
if (this.keyNow == 0) {
|
|
this.OverAllLength = this.ClassifierIDsList.length
|
|
EventBus.$emit('GrayOutPoints', this.ClassifierIDsList)
|
|
}
|
|
//this.getSelectedModelsMetrics()
|
|
this.getFinalResults()
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
},
|
|
RemoveFromStackModels () {
|
|
const path = `http://127.0.0.1:5000/data/ServerRemoveFromStack`
|
|
const postData = {
|
|
ClassifiersList: this.ClassifierIDsListRemaining,
|
|
}
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.post(path, postData, axiosConfig)
|
|
.then(response => {
|
|
console.log('Sent the selected points to the server (scatterplot)!')
|
|
this.updatePredictionsSpace()
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
updatePredictionsSpace () {
|
|
const path = `http://localhost:5000/data/UpdatePredictionsSpace`
|
|
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.get(path, axiosConfig)
|
|
.then(response => {
|
|
this.UpdatePredictions = response.data.UpdatePredictions
|
|
console.log('Updating Predictions Space!')
|
|
if (this.keyNow == 1) {
|
|
EventBus.$emit('InitializeProvenance', this.UpdatePredictions)
|
|
EventBus.$emit('sendKeyScatt', 1)
|
|
EventBus.$emit('GrayOutPoints', this.ClassifierIDsList)
|
|
}
|
|
EventBus.$emit('updatePredictionsSpace', this.UpdatePredictions)
|
|
EventBus.$emit('updateFlagForFinalResults', 0)
|
|
this.getFinalResults()
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
SendSelectedDataPointsToServer () {
|
|
// set a path from which the server will receive the seleceted predictions points
|
|
const path = `http://127.0.0.1:5000/data/ServerRequestDataPoint`
|
|
// brushing and linking between predictions space and data space
|
|
EventBus.$emit('updateDataSpaceHighlighting', this.DataPointsSel)
|
|
|
|
const postData = {
|
|
DataPointsSel: this.DataPointsSel
|
|
}
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.post(path, postData, axiosConfig)
|
|
.then(response => {
|
|
console.log('Sent the selected data points to the server!')
|
|
this.getSelectedDataPointsModels()
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
getSelectedDataPointsModels () {
|
|
const path = `http://localhost:5000/data/ServerSentDataPointsModel`
|
|
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.get(path, axiosConfig)
|
|
.then(response => {
|
|
this.DataPointsModels = response.data.DataPointsModels
|
|
var resultsPerMetricUpdated = JSON.parse(this.DataPointsModels[2])
|
|
console.log('Server successfully sent the new models for the scatterplot!')
|
|
EventBus.$emit('UpdateModelsScatterplot', this.DataPointsModels)
|
|
EventBus.$emit('InitializeMetricsBarChartPrediction', JSON.stringify(resultsPerMetricUpdated))
|
|
EventBus.$emit('UpdateBalanceView', this.DataPointsModels)
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
getSelectedModelsMetrics () {
|
|
const path = `http://localhost:5000/data/BarChartSelectedModels`
|
|
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.get(path, axiosConfig)
|
|
.then(response => {
|
|
this.SelectedMetricsForModels = response.data.SelectedMetricsForModels
|
|
console.log('Server successfully updated barchart for metrics based on selected models!')
|
|
EventBus.$emit('UpdateBarChartperMetric', this.SelectedMetricsForModels)
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
getFinalResults () {
|
|
this.FinalResults = this.getFinalResultsFromBackend()
|
|
},
|
|
getFinalResultsFromBackend () {
|
|
const path = `http://localhost:5000/data/SendFinalResultsBacktoVisualize`
|
|
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.get(path, axiosConfig)
|
|
.then(response => {
|
|
this.FinalResults = response.data.FinalResults
|
|
EventBus.$emit('emittedEventCallingLinePlot', this.FinalResults)
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
fileNameSend () {
|
|
const path = `http://127.0.0.1:5000/data/ServerRequest`
|
|
const postData = {
|
|
fileName: this.RetrieveValueFile,
|
|
}
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.post(path, postData, axiosConfig)
|
|
.then(response => {
|
|
console.log('File name was sent successfully!')
|
|
this.SendAlgorithmsToServer()
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
SendAlgorithmsToServer () {
|
|
const path = `http://127.0.0.1:5000/data/ServerRequestSelParameters`
|
|
const postData = {
|
|
Algorithms: this.Algorithms,
|
|
Toggle: this.toggleDeepMain
|
|
}
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.post(path, postData, axiosConfig)
|
|
.then(response => {
|
|
console.log('Send request to server! Algorithm name was sent successfully!')
|
|
this.factors()
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
UpdateBarChartFeatures () {
|
|
const path = `http://127.0.0.1:5000/data/FeaturesScoresUpdate`
|
|
const postData = {
|
|
models: this.modelsUpdate,
|
|
algorithms: this.AlgorithmsUpdate
|
|
}
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.post(path, postData, axiosConfig)
|
|
.then(response => {
|
|
console.log('Send request to server! Updating Barchart!')
|
|
this.UpdateModelsFeaturePerformance()
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
UpdateBasedonFeatures () {
|
|
const path = `http://127.0.0.1:5000/data/FeaturesSelection`
|
|
const postData = {
|
|
featureSelection: this.SelectedFeaturesPerClassifier
|
|
}
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.post(path, postData, axiosConfig)
|
|
.then(response => {
|
|
console.log('Sent specific features per model!')
|
|
this.getFinalResults()
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
UpdateBrushBoxPlot () {
|
|
EventBus.$emit('emittedEventCallingBrushedBoxPlot', this.brushedBoxPlotUpdate)
|
|
},
|
|
CallPCP () {
|
|
EventBus.$emit('emittedEventCallingSelectedALgorithm', this.selectedAlgorithm)
|
|
EventBus.$emit('emittedEventCallingModelClear')
|
|
EventBus.$emit('emittedEventCallingModelSelect', this.selectedAlgorithm)
|
|
EventBus.$emit('emittedEventCallingModel', this.PerformancePerModel)
|
|
},
|
|
Reset () {
|
|
const path = `http://127.0.0.1:5000/data/Reset`
|
|
this.reset = true
|
|
const postData = {
|
|
ClassifiersList: this.reset
|
|
}
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.post(path, postData, axiosConfig)
|
|
.then(response => {
|
|
console.log('The server side was reset! Done.')
|
|
this.reset = false
|
|
EventBus.$emit('resetViews')
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
render (flag) {
|
|
this.combineWH = []
|
|
this.width = document.body.clientWidth / 12 - 30
|
|
this.height = document.body.clientHeight / 3
|
|
this.combineWH.push(this.width)
|
|
this.combineWH.push(this.height)
|
|
if(flag) {
|
|
EventBus.$emit('Responsive', this.combineWH)
|
|
}
|
|
else {
|
|
EventBus.$emit('ResponsiveandChange', this.combineWH)
|
|
}
|
|
},
|
|
change () {
|
|
this.render(false)
|
|
},
|
|
factors () {
|
|
const path = `http://127.0.0.1:5000/data/factors`
|
|
const postData = {
|
|
Factors: this.basicValuesFact
|
|
}
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.post(path, postData, axiosConfig)
|
|
.then(response => {
|
|
console.log('Sending factors!')
|
|
this.getDatafromtheBackEnd()
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
RetrieveNewColors () {
|
|
const path = `http://127.0.0.1:5000/data/UpdateOverv`
|
|
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.get(path, axiosConfig)
|
|
.then(response => {
|
|
this.sumPerClassifierSel = response.data.Results
|
|
console.log('Server successfully send the new colors!')
|
|
EventBus.$emit('getColors',this.sumPerClassifierSel)
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
updateToggle () {
|
|
var toggles = []
|
|
toggles.push(this.toggle1)
|
|
toggles.push(this.toggle2)
|
|
toggles.push(this.toggle3)
|
|
EventBus.$emit('emittedEventCallingTogglesUpdate', toggles)
|
|
},
|
|
DataSpaceFun () {
|
|
const path = `http://127.0.0.1:5000/data/SendDataSpacPoints`
|
|
const postData = {
|
|
points: this.dataPointsSelfromDataSpace,
|
|
}
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.post(path, postData, axiosConfig)
|
|
.then(response => {
|
|
console.log('Send request to server! Brushed points sent successfully!')
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
sendPointsCrossMutat () {
|
|
const path = `http://127.0.0.1:5000/data/CrossoverMutation`
|
|
|
|
EventBus.$emit('SendStoredEnsemble', this.storeEnsemble)
|
|
|
|
var mergedStoreEnsembleLoc = [].concat.apply([], this.storeEnsemble)
|
|
|
|
const postData = {
|
|
RemainingPoints: this.unselectedRemainingPoints,
|
|
StoreEnsemble: mergedStoreEnsembleLoc
|
|
}
|
|
const axiosConfig = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
|
|
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
|
|
}
|
|
}
|
|
axios.post(path, postData, axiosConfig)
|
|
.then(response => {
|
|
console.log('Sent the unselected points for crossover and mutation.')
|
|
this.getDatafromtheBackEnd()
|
|
this.getCMComputedData()
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
},
|
|
created () {
|
|
// does the browser support the Navigation Timing API?
|
|
if (window.performance) {
|
|
console.info("window.performance is supported");
|
|
}
|
|
// do something based on the navigation type...
|
|
if(performance.navigation.type === 1) {
|
|
console.info("TYPE_RELOAD");
|
|
this.Reset();
|
|
}
|
|
window.addEventListener('resize', this.change)
|
|
},
|
|
mounted() {
|
|
|
|
var modal = document.getElementById('myModal')
|
|
window.onclick = function(event) {
|
|
//alert(event.target)
|
|
if (event.target == modal) {
|
|
modal.style.display = "none";
|
|
}
|
|
}
|
|
this.render(true)
|
|
loadProgressBar()
|
|
window.onbeforeunload = function(e) {
|
|
return 'Dialog text here.'
|
|
}
|
|
$(window).on("unload", function(e) {
|
|
alert('Handler for .unload() called.');
|
|
})
|
|
|
|
|
|
|
|
EventBus.$on('sendKeyNow', data => { this.keyLoc = data })
|
|
|
|
EventBus.$on('ReturningBrushedPointsIDs', data => { this.modelsUpdate = data })
|
|
//EventBus.$on('ReturningBrushedPointsIDs', this.UpdateBarChartFeatures )
|
|
EventBus.$on('ConfirmDataSet', this.fileNameSend)
|
|
EventBus.$on('reset', this.Reset)
|
|
EventBus.$on('ReturningAlgorithms', data => { this.selectedAlgorithms = data })
|
|
EventBus.$on('ReturningBrushedPointsParams', data => { this.parametersofModels = data; })
|
|
|
|
EventBus.$on('RemainingPoints', data => { this.unselectedRemainingPoints = data })
|
|
EventBus.$on('InitializeCrossoverMutation', this.sendPointsCrossMutat)
|
|
|
|
EventBus.$on('RemainingPointsCM', data => { this.unselectedRemainingPointsEnsem = data })
|
|
|
|
EventBus.$on('ChangeKey', data => { this.keyNow = data })
|
|
EventBus.$on('SendSelectedPointsUpdateIndicator', data => { this.ClassifierIDsList = data; this.storeEnsemble.push(this.ClassifierIDsList)})
|
|
EventBus.$on('SendSelectedPointsUpdateIndicator', this.SelectedPoints)
|
|
EventBus.$on('sendToServerSelectedScatter', this.SendSelectedPointsToServer)
|
|
|
|
EventBus.$on('SendSelectedPointsUpdateIndicatorCM', data => { this.ClassifierIDsListCM = data })
|
|
EventBus.$on('SendSelectedPointsUpdateIndicatorCM', this.SelectedPointsCM)
|
|
|
|
EventBus.$on('SendSelectedDataPointsToServerEvent', data => { this.DataPointsSel = data })
|
|
EventBus.$on('SendSelectedDataPointsToServerEvent', this.SendSelectedDataPointsToServer)
|
|
EventBus.$on('SendSelectedFeaturesEvent', data => { this.SelectedFeaturesPerClassifier = data })
|
|
EventBus.$on('sendToServerFeatures', this.UpdateBasedonFeatures)
|
|
EventBus.$on('SendToServerDataSetConfirmation', data => { this.RetrieveValueFile = data })
|
|
EventBus.$on('SendToServerLocalFile', data => { this.localFile = data })
|
|
EventBus.$on('SendToServerLocalFile', this.SendToServerData)
|
|
EventBus.$on('PCPCall', data => { this.selectedAlgorithm = data })
|
|
EventBus.$on('toggle1', data => { this.toggle1 = data })
|
|
EventBus.$on('toggle2', data => { this.toggle2 = data })
|
|
EventBus.$on('toggle3', data => { this.toggle3 = data })
|
|
EventBus.$on('toggle1', this.updateToggle)
|
|
EventBus.$on('toggle2', this.updateToggle)
|
|
EventBus.$on('toggle3', this.updateToggle)
|
|
EventBus.$on('PCPCall', this.CallPCP)
|
|
EventBus.$on('PCPCallDB', this.SendBrushedParameters)
|
|
EventBus.$on('UpdateBoxPlot', data => { this.brushedBoxPlotUpdate = data })
|
|
EventBus.$on('UpdateBoxPlot', this.UpdateBrushBoxPlot)
|
|
EventBus.$on('CallFactorsView', data => { this.basicValuesFact = data })
|
|
EventBus.$on('CallFactorsView', this.factors)
|
|
EventBus.$on('AllAlModels', data => {
|
|
this.valueSel = data
|
|
this.valueAll = data
|
|
})
|
|
EventBus.$on('sendPointsNumber', data => {this.OverSelLength = data})
|
|
EventBus.$on('sendPointsNumber', data => {this.OverAllLength = data})
|
|
EventBus.$on('sendPointsNumberCM', data => {this.OverSelLengthCM = data})
|
|
EventBus.$on('sendPointsNumberCM', data => {this.OverAllLengthCM = data})
|
|
|
|
EventBus.$on('AllSelModels', data => {this.valueSel = data})
|
|
|
|
EventBus.$on('RemoveFromStack', data => { this.ClassifierIDsListRemaining = data })
|
|
EventBus.$on('RemoveFromStack', this.RemoveFromStackModels)
|
|
|
|
EventBus.$on('OpenModal', this.openModalFun)
|
|
|
|
EventBus.$on('SendSelectedPointsToServerEventfromData', data => {this.dataPointsSelfromDataSpace = data})
|
|
EventBus.$on('SendSelectedPointsToServerEventfromData', this.DataSpaceFun)
|
|
|
|
EventBus.$on('SendFilter', data => {this.filterData = data})
|
|
EventBus.$on('SendFilter', this.FilterFun)
|
|
|
|
EventBus.$on('SendAction', data => {this.actionData = data})
|
|
EventBus.$on('SendAction', this.ActionFun)
|
|
|
|
EventBus.$on('SendProvenance', data => {this.provenanceData = data})
|
|
EventBus.$on('SendProvenance', this.ProvenanceControlFun)
|
|
|
|
EventBus.$on('toggleDeep', data => {this.toggleDeepMain = data})
|
|
|
|
//Prevent double click to search for a word.
|
|
document.addEventListener('mousedown', function (event) {
|
|
if (event.detail > 1) {
|
|
event.preventDefault();
|
|
}
|
|
}, false);
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
#nprogress .bar {
|
|
background: red !important;
|
|
}
|
|
|
|
#nprogress .peg {
|
|
box-shadow: 0 0 10px red, 0 0 5px red !important;
|
|
}
|
|
|
|
#nprogress .spinner-icon {
|
|
border-top-color: red !important;
|
|
border-left-color: red !important;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Helvetica', 'Arial', sans-serif !important;
|
|
left: 0px;
|
|
right: 0px;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
margin-top: -4px !important;
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
z-index: -1 !important;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 0.60rem !important;
|
|
}
|
|
|
|
hr {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
border: 0;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
@import './../assets/w3.css';
|
|
</style> |