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.
86 lines
2.8 KiB
86 lines
2.8 KiB
<template>
|
|
<div class="text-center">
|
|
<label id="data" for="param-dataset" data-toggle="tooltip" data-placement="right" title="Tip: use one of the data sets already provided or upload a new file.">{{ dataset }}</label>
|
|
<select id="selectFile" @change="selectDataSet()">
|
|
<option value="biodegC.csv">Biodegradation</option>
|
|
<option value="heartC.csv" selected>Heart disease</option>
|
|
<option value="local">Upload file</option>
|
|
</select>
|
|
<button class="btn-outline-success"
|
|
id="initializeID"
|
|
v-on:click="initialize">
|
|
<font-awesome-icon icon="search" />
|
|
{{ searchText }}
|
|
</button>
|
|
<button class="btn-outline-danger"
|
|
id="resetID"
|
|
v-on:click="reset">
|
|
<font-awesome-icon icon="trash" />
|
|
{{ resetText }}
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Papa from 'papaparse'
|
|
import { EventBus } from '../main.js'
|
|
import {$,jQuery} from 'jquery';
|
|
import * as d3Base from 'd3'
|
|
|
|
// attach all d3 plugins to the d3 library
|
|
const d3 = Object.assign(d3Base)
|
|
|
|
export default {
|
|
name: 'DataSetExecController',
|
|
data () {
|
|
return {
|
|
defaultDataSet: 'heartC', // default value for the first data set
|
|
searchText: 'Hyper-parameter search',
|
|
resetText: 'Reset',
|
|
dataset: 'Data set:'
|
|
}
|
|
},
|
|
methods: {
|
|
selectDataSet () {
|
|
const fileName = document.getElementById('selectFile')
|
|
this.defaultDataSet = fileName.options[fileName.selectedIndex].value
|
|
this.defaultDataSet = this.defaultDataSet.split('.')[0]
|
|
|
|
if (this.defaultDataSet == "heartC" || this.defaultDataSet == "seismicC" || this.defaultDataSet == "biodegC") { // This is a function that handles a new file, which users can upload.
|
|
this.dataset = "Data set"
|
|
d3.select("#data").select("input").remove(); // Remove the selection field.
|
|
EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet)
|
|
} else {
|
|
EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet)
|
|
d3.select("#data").select("input").remove();
|
|
this.dataset = ""
|
|
var data
|
|
d3.select("#data")
|
|
.append("input")
|
|
.attr("type", "file")
|
|
.style("font-size", "18.5px")
|
|
.style("width", "200px")
|
|
.on("change", function() {
|
|
var file = d3.event.target.files[0];
|
|
Papa.parse(file, {
|
|
header: true,
|
|
dynamicTyping: true,
|
|
skipEmptyLines: true,
|
|
complete: function(results) {
|
|
data = results.data;
|
|
EventBus.$emit('SendToServerLocalFile', data)
|
|
}
|
|
});
|
|
})
|
|
}
|
|
},
|
|
reset () {
|
|
EventBus.$emit('reset')
|
|
EventBus.$emit('alternateFlagLock')
|
|
},
|
|
initialize () {
|
|
EventBus.$emit('ConfirmDataSet')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|