@@ -974,6 +983,7 @@ export default Vue.extend({
},
},
created () {
+
// does the browser support the Navigation Timing API?
if (window.performance) {
console.info("window.performance is supported");
@@ -986,6 +996,38 @@ export default Vue.extend({
window.addEventListener('resize', this.change)
},
mounted() {
+ var coll = document.getElementsByClassName("collapsible");
+ var i;
+ var flagLocalMounted = true
+ var flagLocalSkip = true
+ EventBus.$on('OpenModal', data =>{ flagLocalSkip = false })
+ for (i = 0; i < coll.length; i++) {
+ coll[i].addEventListener("click", function() {
+ console.log(flagLocalSkip)
+ if (flagLocalSkip) {
+ var content = document.getElementsByClassName("content")
+ var value = "370px"
+ for (let j = 0; j < content.length; j++) {
+ if (content[j].style.display === "block") {
+ content[j].style.display = "none";
+ } else {
+ content[j].style.display = "block";
+ if (flagLocalMounted) {
+ content[j].style.display = "none";
+ }
+ }
+ }
+ flagLocalMounted = false
+ var combineWH = []
+ combineWH.push(this.width)
+ combineWH.push(this.height - 100)
+ EventBus.$emit('ResponsiveandAdapt', value)
+ EventBus.$emit('ResponsiveandChange', combineWH)
+ EventBus.$emit('ResponsiveandChange', combineWH)
+ }
+ flagLocalSkip = true
+ });
+ }
this.Alg()
var modal = document.getElementById('myModal')
@@ -1118,5 +1160,14 @@ hr {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
+.collapsible {
+ cursor: pointer;
+}
+
+.content {
+ display: block;
+ overflow: hidden;
+}
+
@import './../assets/w3.css';
\ No newline at end of file
diff --git a/frontend/src/components/PCPData.vue b/frontend/src/components/PCPData.vue
index 0ec4b7000..b32308ff3 100644
--- a/frontend/src/components/PCPData.vue
+++ b/frontend/src/components/PCPData.vue
@@ -20,6 +20,7 @@ export default {
colorsValues: ['#808000','#008080','#bebada','#fccde5','#d9d9d9','#bc80bd','#ccebc5'],
ClassifierIDsListClearedData: [],
RetrieveDataSet: 'HeartC',
+ smallScreenMode: '0px'
}
},
methods: {
@@ -33,6 +34,14 @@ export default {
const target_names = JSON.parse(this.PCPDataReceived[3])
const target_names_original = JSON.parse(this.PCPDataReceived[4])
+ if (this.smallScreenMode != "370px") {
+ var width = 1200
+ var height = 248
+ } else {
+ var width = 800
+ var height = 251
+ }
+
var extraction = []
for (let i = 0; i < DataSetParse.length; i++) {
if (this.RetrieveDataSet == 'IrisC') {
@@ -55,8 +64,8 @@ export default {
if (DataSetParse.length == this.ClassifierIDsListClearedData.length || this.ClassifierIDsListClearedData.length == 0) {
var pc = ParCoords()("#PCPDataView")
.data(DataSetParse)
- .width(1200)
- .height(272)
+ .width(width)
+ .height(height)
.hideAxis(["Outcome","ID"])
.color(function(d, i) { return colors[d.Outcome] })
.bundlingStrength(0) // set bundling strength
@@ -70,8 +79,8 @@ export default {
else {
var pc = ParCoords()("#PCPDataView")
.data(DataSetParse)
- .width(1200)
- .height(272)
+ .width(width)
+ .height(height)
.hideAxis(["Outcome","ID"])
.color(function(d, i) { return colors[d.Outcome] })
.bundlingStrength(0) // set bundling strength
@@ -107,6 +116,8 @@ export default {
EventBus.$on('resetViews', this.reset)
EventBus.$on('SendToServerDataSetConfirmation', data => { this.RetrieveDataSet = data })
+
+ EventBus.$on('ResponsiveandAdapt', data => { this.smallScreenMode = data })
}
}
diff --git a/frontend/src/components/Parameters.vue b/frontend/src/components/Parameters.vue
index beb1726b6..45edf8331 100644
--- a/frontend/src/components/Parameters.vue
+++ b/frontend/src/components/Parameters.vue
@@ -93,7 +93,7 @@ export default {
legendPosition: {x: 20, y: 20}, // the position of the legend, from the top-left corner of the svg
levels: 3, //How many levels or inner circles should there be drawn
maxValue: 0, //What is the value that the biggest circle will represent
- labelFactor: 1.25, //How much farther than the radius of the outer circle should the labels be placed
+ labelFactor: 1.32, //How much farther than the radius of the outer circle should the labels be placed
wrapWidth: 60, //The number of pixels after which a label needs to be given a new line
opacityArea: 0.35, //The opacity of the area of the blob
dotRadius: 2, //The size of the colored circles of each blog
@@ -634,8 +634,8 @@ export default {
//////////////////////////////////////////////////////////////
var margin = {top: 50, right: 120, bottom: 55, left: 65},
- legendPosition = {x: 425, y: 25},
- width = Math.min(520, window.innerWidth - 10) - margin.left - margin.right,
+ legendPosition = {x: 320, y: 25},
+ width = Math.min(406, window.innerWidth - 10) - margin.left - margin.right,
height = Math.min(width + 12, window.innerHeight + 12 - margin.top - margin.bottom);
//////////////////////////////////////////////////////////////
@@ -752,8 +752,10 @@ export default {
EventBus.$on('Responsive', data => {
this.WH = data})
- EventBus.$on('ResponsiveandChange', data => {
- this.WH = data})
+ EventBus.$on('ResponsiveandAdapt', data => {
+ document.getElementById('overview').style.height = data
+ document.getElementById('overview').style.marginTop = "35px"
+ })
// reset the views
EventBus.$on('resetViews', this.reset)
@@ -841,6 +843,6 @@ export default {
}
#overview {
- min-height: 450px;
+ min-height: 336px;
}
\ No newline at end of file
diff --git a/frontend/src/components/PerMetricBarChart.vue b/frontend/src/components/PerMetricBarChart.vue
index d405f0a27..a9698354d 100644
--- a/frontend/src/components/PerMetricBarChart.vue
+++ b/frontend/src/components/PerMetricBarChart.vue
@@ -21,6 +21,7 @@ export default {
,0,0,1,0,0
,0,1,1,1
],
+ smallScreenMode: '0px',
}
},
methods: {
@@ -84,90 +85,98 @@ export default {
}
}
}
- var width = this.WH[0]*6.5 // interactive visualization
- var height = this.WH[1]*0.482 // interactive visualization
- var trace1 = {
- x: x,
- y: perModelAllClear,
- name: 'All Points',
- type: 'box',
- boxmean: true,
- marker: {
- color: 'rgb(0,0,0)'
+
+
+ if (this.smallScreenMode != "370px") {
+ var width = this.WH[0]*6.5 // interactive visualization
+ var height = this.WH[1]*0.482 // interactive visualization
+ } else {
+ var width = this.WH[0]*6.8
+ var height = this.WH[1]*0.38
+ }
+
+ var trace1 = {
+ x: x,
+ y: perModelAllClear,
+ name: 'All Points',
+ type: 'box',
+ boxmean: true,
+ marker: {
+ color: 'rgb(0,0,0)'
+ }
+ };
+ var trace2 = {
+ x: x,
+ y: perModelSelectedClear,
+ name: 'Selected Points',
+ type: 'box',
+ boxmean: true,
+ marker: {
+ color: 'rgb(211,211,211)'
+ }
+ };
+ var data = [trace1, trace2];
+ var layout = {
+ font: { family: 'Helvetica', size: 14, color: '#000000' },
+ boxmode: 'group',
+ autosize: true,
+ width: width,
+ height: height,
+ hovermode: 'x',
+ margin: {
+ l: 50,
+ r: 0,
+ b: 35,
+ t: 40,
+ pad: 0
+ },
+ xaxis: {
+ title: 'Performance Metrics',
+ titlefont: {
+ size: 16,
+ color: 'black'
+ }},
+ yaxis: {
+ title: '# Performance (%) #',
+ titlefont: {
+ size: 16,
+ color: 'black'
+ }}};
+ var boxPlot = document.getElementById('PerMetricBar');
+ var config = {displayModeBar: false, scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage'], responsive: true}
+ Plotly.newPlot(boxPlot, data, layout, config);
+
+ boxPlot.on('plotly_click', (eventData) => {
+ var xAxisHovered
+ xAxisHovered = eventData.points[0].x
+ var index
+ if (xAxisHovered == 'Accuracy') {
+ index = 0
}
- };
- var trace2 = {
- x: x,
- y: perModelSelectedClear,
- name: 'Selected Points',
- type: 'box',
- boxmean: true,
- marker: {
- color: 'rgb(211,211,211)'
+ else if (xAxisHovered == 'G-Mean') {
+ index = 1
}
- };
- var data = [trace1, trace2];
- var layout = {
- font: { family: 'Helvetica', size: 14, color: '#000000' },
- boxmode: 'group',
- autosize: true,
- width: width,
- height: height,
- hovermode: 'x',
- margin: {
- l: 50,
- r: 0,
- b: 35,
- t: 40,
- pad: 0
- },
- xaxis: {
- title: 'Performance Metrics',
- titlefont: {
- size: 16,
- color: 'black'
- }},
- yaxis: {
- title: '# Performance (%) #',
- titlefont: {
- size: 16,
- color: 'black'
- }}};
- var boxPlot = document.getElementById('PerMetricBar');
- var config = {displayModeBar: false, scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage'], responsive: true}
- Plotly.newPlot(boxPlot, data, layout, config);
-
- boxPlot.on('plotly_click', (eventData) => {
- var xAxisHovered
- xAxisHovered = eventData.points[0].x
- var index
- if (xAxisHovered == 'Accuracy') {
- index = 0
- }
- else if (xAxisHovered == 'G-Mean') {
- index = 1
- }
- else if (xAxisHovered == 'Precision') {
- index = 2
- }
- else if (xAxisHovered == 'Recall') {
- index = 3
- }
- else if (xAxisHovered == 'F-Beta Score') {
- index = 4
- }
- else if (xAxisHovered == 'MCC') {
- index = 5
- }
- else if (xAxisHovered == 'ROC AUC') {
- index = 6
- }
- else {
- index = 7
- }
- EventBus.$emit('updateBold', xAxisHovered)
- EventBus.$emit('updateMetricsScatter', resultsColors[index])
- });
+ else if (xAxisHovered == 'Precision') {
+ index = 2
+ }
+ else if (xAxisHovered == 'Recall') {
+ index = 3
+ }
+ else if (xAxisHovered == 'F-Beta Score') {
+ index = 4
+ }
+ else if (xAxisHovered == 'MCC') {
+ index = 5
+ }
+ else if (xAxisHovered == 'ROC AUC') {
+ index = 6
+ }
+ else {
+ index = 7
+ }
+ EventBus.$emit('updateBold', xAxisHovered)
+ EventBus.$emit('updateMetricsScatter', resultsColors[index])
+ });
},
reset () {
Plotly.purge('PerMetricBar')
@@ -186,8 +195,8 @@ export default {
EventBus.$on('Responsive', data => {
this.WH = data})
- EventBus.$on('ResponsiveandChange', data => {
- this.WH = data})
+
+ EventBus.$on('ResponsiveandAdapt', data => { this.smallScreenMode = data })
EventBus.$on('UpdateBarChartperMetric', data => {
this.SelBarChartMetrics = data})
diff --git a/frontend/src/components/PredictionsSpace.vue b/frontend/src/components/PredictionsSpace.vue
index 9106b7e8d..e33f3ddd0 100644
--- a/frontend/src/components/PredictionsSpace.vue
+++ b/frontend/src/components/PredictionsSpace.vue
@@ -30,6 +30,7 @@ export default {
colorsValues: ['#808000','#008080','#bebada','#fccde5','#d9d9d9','#bc80bd','#ccebc5'],
WH: [],
onlyOnce: true,
+ smallScreenMode: '0px',
}
},
methods: {
@@ -53,9 +54,14 @@ export default {
ScatterPlotPredView () {
Plotly.purge('OverviewPredPlotly')
- // responsive visualization
- var width = this.WH[0]*6.5 // interactive visualization
- var height = this.WH[1]*1.185 // interactive visualization
+ if (this.smallScreenMode != "370px") {
+ var width = this.WH[0]*6.5 // interactive visualization
+ var height = this.WH[1]*0.98 // interactive visualization
+ } else {
+ var width = this.WH[0]*6.6 // interactive visualization
+ var height = this.WH[1]*0.95 // interactive visualization
+ }
+
var XandYCoordinatesMDS
var target_names = JSON.parse(this.PredictionsData[4])
if (this.UpdatedData.length != 0) {
@@ -74,7 +80,6 @@ export default {
stringParameters.push(JSON.stringify(DataSetParse[i]).replace(/,/gi, '
'))
}
const XandYCoordinatesTSNE = JSON.parse(this.PredictionsData[18])
- console.log(XandYCoordinatesTSNE)
const XandYCoordinatesUMAP= JSON.parse(this.PredictionsData[19])
var result = [];
@@ -330,7 +335,6 @@ export default {
OverviewPlotly.on('plotly_selected', function (evt) {
if (typeof evt !== 'undefined') {
const DataPoints = []
- console.log(evt)
for (let i = 0; evt.points.length; i++) {
if (evt.points[i] === undefined) {
break
@@ -339,7 +343,6 @@ export default {
DataPoints.push(OnlyId[3])
}
}
- console.log(DataPoints)
if (DataPoints != '') {
EventBus.$emit('SendSelectedDataPointsToServerEvent', DataPoints)
} else {
@@ -358,8 +361,8 @@ export default {
EventBus.$on('emittedEventCallingPredictionsSpacePlotView', this.ScatterPlotPredView)
EventBus.$on('Responsive', data => {
this.WH = data})
- EventBus.$on('ResponsiveandChange', data => {
- this.WH = data})
+
+ EventBus.$on('ResponsiveandAdapt', data => { this.smallScreenMode = data })
EventBus.$on('RepresentationSelectionPred', data => {this.representationDef = data})
EventBus.$on('RepresentationSelectionPred', this.ScatterPlotPredView)
diff --git a/frontend/src/components/Provenance.vue b/frontend/src/components/Provenance.vue
index 0e5202ce6..4c5167294 100644
--- a/frontend/src/components/Provenance.vue
+++ b/frontend/src/components/Provenance.vue
@@ -78,8 +78,8 @@ export default {
},
provenance () {
var canvas = document.getElementById("main-canvas");
- var width = this.WH[0]*6.52 // interactive visualization
- var height = this.WH[1]*0.375 // interactive visualization
+ var width = 1195.3333333333333
+ var height = 173.375
var flagKNN = 0
var flagSVC = 0
@@ -526,8 +526,6 @@ export default {
EventBus.$on('Responsive', data => {
this.WH = data})
- EventBus.$on('ResponsiveandChange', data => {
- this.WH = data})
// reset the views
EventBus.$on('resetViews', this.reset)
diff --git a/frontend/src/components/ScatterPlot.vue b/frontend/src/components/ScatterPlot.vue
index 55e1fef91..e31a7f53e 100644
--- a/frontend/src/components/ScatterPlot.vue
+++ b/frontend/src/components/ScatterPlot.vue
@@ -63,7 +63,8 @@ export default {
keyLocal: 0,
activeModels: 0,
pushModelsRemaining: [],
- onlyOnce: true
+ onlyOnce: true,
+ smallScreenMode: '0px',
}
},
methods: {
@@ -234,7 +235,6 @@ export default {
//this.TSNEStore.push(TSNEData)
this.modelIDStore.push(modelId)
this.UMAPStore.push(UMAPData)
- console.log('mpike5')
colorsforScatterPlot = this.colorsStore.slice(this.activeModels,this.activeModels+1)[0]
MDSData = this.MDSStore.slice(this.activeModels,this.activeModels+1)[0]
parameters = this.parametersStore.slice(this.activeModels,this.activeModels+1)[0]
@@ -251,8 +251,6 @@ export default {
EventBus.$emit('NewHeatmapAccordingtoNewStack', modelId)
}
- console.log(this.colorsStore)
- console.log(this.MDSStore)
var DataGeneral
var maxX
@@ -260,8 +258,13 @@ export default {
var maxY
var minY
- var width = this.WH[0]*6.5 // interactive visualization
- var height = this.WH[1]*1.192 // interactive visualization
+ if (this.smallScreenMode != "370px") {
+ var width = this.WH[0]*6.6 // interactive visualization
+ var height = this.WH[1]*0.98 // interactive visualization
+ } else {
+ var width = this.WH[0]*7 // interactive visualization
+ var height = this.WH[1]*0.95 // interactive visualization
+ }
var layout
if (this.representationDef == 'mds') {
@@ -548,10 +551,11 @@ export default {
EventBus.$on('emittedEventCallingScatterPlot', this.ScatterPlotView)
EventBus.$on('getColors', data => {
this.colorsforOver = data})
+
EventBus.$on('Responsive', data => {
this.WH = data})
- EventBus.$on('ResponsiveandChange', data => {
- this.WH = data})
+ EventBus.$on('ResponsiveandAdapt', data => { this.smallScreenMode = data })
+
EventBus.$on('ParametersAll', data => { this.parametersAll = data })
EventBus.$on('getColors', this.UpdateScatter)
EventBus.$on('RepresentationSelection', data => {this.representationDef = data})
diff --git a/frontend/src/components/SlidersController.vue b/frontend/src/components/SlidersController.vue
index 57a35bfd3..00ae7edb6 100644
--- a/frontend/src/components/SlidersController.vue
+++ b/frontend/src/components/SlidersController.vue
@@ -54,14 +54,14 @@
- (*) Average:
- Weighted (W)
+ (*) Aver.:
+ Weighted
Micro
Macro
- Detailed Feature Search:
+ Feat. Search:
@@ -243,6 +243,21 @@
},
},
mounted () {
+ EventBus.$on('Responsive', data => {
+
+ this.WH = data
+ var myClasses = document.getElementsByClassName('slider slider-horizontal')
+
+ for(var i = 0; i < myClasses.length; i++){
+ if (this.WH[0] > 125) {
+ myClasses[i].style.width = "260px"; // or
+ }
+ else {
+ myClasses[i].style.width = "60px"; // depending on what you're doing
+ }
+ }
+ })
+
$('#toggleDeepID').bootstrapToggle({
on: 'On',
off: 'Off',
@@ -266,8 +281,12 @@ p {
padding: 0 !important;
}
-.slider.slider-horizontal{
- width:260px; /* sample value - set it as you like*/
+.toggle-on.btn-sm {
+ padding-right: 20px
+}
+
+.toggle-off.btn-sm {
+ padding-right: 0px
}
.slider-handle {
diff --git a/frontend/src/components/ToggleSelection.vue b/frontend/src/components/ToggleSelection.vue
index 837d9493f..e3a434033 100644
--- a/frontend/src/components/ToggleSelection.vue
+++ b/frontend/src/components/ToggleSelection.vue
@@ -1,8 +1,8 @@
@@ -40,8 +40,8 @@ export default {
EventBus.$on('resetToggles', this.ResetPosition)
$('#toggle-uni').bootstrapToggle({
- on: 'Enabled',
- off: 'Disabled',
+ on: 'On',
+ off: 'Off',
width: '8%',
});
$('#toggle-uni').change(function() {
@@ -55,8 +55,8 @@ export default {
}
})
$('#toggle-per').bootstrapToggle({
- on: 'Enabled',
- off: 'Disabled',
+ on: 'On',
+ off: 'Off',
width: '8%',
});
$('#toggle-per').change(function() {
@@ -70,8 +70,8 @@ export default {
}
})
$('#toggle-fi').bootstrapToggle({
- on: 'Enabled',
- off: 'Disabled',
+ on: 'On',
+ off: 'Off',
width: '8%',
});
$('#toggle-fi').change(function() {