Skip to content
Snippets Groups Projects
Verified Commit cad76345 authored by BARBIER Marc's avatar BARBIER Marc
Browse files

improved graph responsiveness by aborting useless requests

parent 2a761e2e
No related branches found
No related tags found
No related merge requests found
......@@ -33,6 +33,7 @@ export default defineComponent({
showedColumns: [] as number[],
chartScale: [] as Array<string | number>,
chartData: [] as ChartElement[],
abortController: new AbortController(),
showAnomalies: true,
showWindows: false,
selectedX: 'step',
......@@ -84,7 +85,7 @@ export default defineComponent({
xrangeMax = xrangeMin + 1000
}
await this.loadDataSet(xrangeMin, xrangeMax)
await this.loadDataSet(xrangeMin, xrangeMax, true)
this.generateChartData()
},
selectedX() {
......@@ -108,12 +109,15 @@ export default defineComponent({
makeTheSliderDragOnLock(this.sliderMax)
},
methods: {
async loadDataSet(xmin?: number, xmax?: number) {
async loadDataSet(xmin?: number, xmax?: number, cancelPrevious = false) {
if(cancelPrevious)this.abortController.abort()
const id = localStorage.getItem('datasetId')
if(id) {
const response = await secureFetch(this, `http://localhost:8080/rest/load-data?id=${id}&windowed=false&pagination=${xmin || 0}-${xmax || 1000}`)
this.abortController = new AbortController()
await secureFetch(this, `http://localhost:8080/rest/load-data?id=${id}&windowed=false&pagination=${xmin || 0}-${xmax || 1000}`, { signal: this.abortController.signal }).then(async (response) => {
this.dataset = await response.json()
this.columns = this.dataset?.rows[0] || []
}).catch(() => {/**/})
}
},
......@@ -208,7 +212,7 @@ export default defineComponent({
async generateChartLabels(chartData: ChartElement[], dataset: Table) {
const patternOcc = this.patternsOcc
if(patternOcc && patternOcc.rowsStartingFrom1) {
if(patternOcc && patternOcc.rowsStartingFrom1 && this.selectedPatterns.length) {
const windowIntervals = this.windowToStepIntervals(dataset)
//todo search for the window columns
const firstRow = dataset.rowsStartingFrom1[0]
......@@ -305,7 +309,7 @@ export default defineComponent({
this.selectedPatterns = []
},
selectAll() {
this.selectedPatterns = this.patterns?.rowsStartingFrom1.map((val, index) => index.toString()) || []
this.selectedPatterns = this.patterns?.rowsStartingFrom1.map((_val, index) => index.toString()) || []
}
},
})
......@@ -84,7 +84,7 @@ export default defineComponent({
const context = canvas.getContext('2d')
if(!context) {
throw new Error('No 2D context avaliable')
throw new Error('No 2D context available')
}
//add right padding
......@@ -214,7 +214,7 @@ export default defineComponent({
const scaleLabelSeparators = width / 30
const scale = this.scale.length / sectionCount
const labels = [ ...Array(Math.floor(this.scale.length / scale))].map((val, index) => this.scale[Math.floor(index * scale)])
const labels = [ ...Array(Math.floor(this.scale.length / scale))].map((_val, index) => this.scale[Math.floor(index * scale)])
for(const [index, value] of labels.entries()) {
context.save()
......
......@@ -7,7 +7,11 @@ async function secureFetch(self: ComponentPublicInstance, url: string, options?:
try {
//await so we can capture exceptions
return await promise
} catch(e) {
} catch(e: any) {
if(e.name === "AbortError") {
//if the exception is an abort error we just directly give it back
return promise
}
self.$toast.clear()
self.$toast.show('Could not contact the server make sure it is running on port 8080', { maxToasts: 1, type: 'error', duration: 3600 * 1000 })
let serverAvailable = false
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment