From 7ed4bea47666dd89d4bb4068e5e05a94f9b17725 Mon Sep 17 00:00:00 2001
From: Julian Martinsson Bonde <johnmartins1992@gmail.com>
Date: Wed, 8 Nov 2023 16:19:58 +0100
Subject: [PATCH] Loading overhaul (#88)

* Adjusted positioning and visibility of loading msg

* Minor performance tweaks for rasterized rendering

* Rasterized rendering now shows proper loading messages

* Nothing to see here

* Reverted rendering hook loading stage

* Batch render, but no export

* Dynamic chunking

* Bumped version to 1.11.0

Export adjustments
---
 package.json                                  |   2 +-
 src/components/DataList.vue                   |  36 ++---
 src/components/LoadingModal.vue               |  20 ++-
 src/components/plot-layouts/PCPlot/PCPlot.vue |  36 +++--
 .../PCPlot/PCPlotPathLayerRaster.vue          | 131 +++++++++++-------
 .../PCPlot/PCPlotPathLayerVector.vue          |   6 +-
 .../sidemenu/import-export/ExportForm.vue     |  41 ++++--
 .../sidemenu/import-export/SourceForm.vue     |   8 +-
 src/store/OptionsStore.js                     |   2 +-
 src/store/StateStore.js                       |  14 +-
 10 files changed, 187 insertions(+), 109 deletions(-)

diff --git a/package.json b/package.json
index 8021025..5e69d82 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "md-analysis-cli",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "private": true,
   "author": {
     "name": "Julian Martinsson Bonde",
diff --git a/src/components/DataList.vue b/src/components/DataList.vue
index 52eef52..0d0bd58 100644
--- a/src/components/DataList.vue
+++ b/src/components/DataList.vue
@@ -58,7 +58,7 @@
 
 <script setup>
 
-import { reactive, ref, onMounted, onUpdated } from "vue"
+import { reactive, ref, onMounted, onUpdated, nextTick } from "vue"
 import { storeToRefs } from "pinia"
 
 import {useDataStore} from "@/store/DataStore"
@@ -86,8 +86,8 @@ function moveCategory (category, n) {
 }
 
 
-function sortBy (category) {
-    stateStore.setLoading('Sorting data')
+async function sortBy (category) {
+    await stateStore.setLoading('Sorting data')
 
     if (sortCategoryID.value) {
         if (sortCategoryID.value === category.id) {
@@ -95,22 +95,22 @@ function sortBy (category) {
         }
     }
     
-    setTimeout(() => {
-        sortFunction.value = (a,b) => {
-            let valA = a[category.title]
-            let valB = b[category.title]
-            if (!category.usesCategoricalData) {
-                valA = parseFloat(valA)
-                valB = parseFloat(valB)
-            }
-            if (valA > valB) return sortReversed.value ? -1 : 1
-            if (valA < valB) return sortReversed.value ? 1 : -1
-            return 0
+    await nextTick();
+    
+    sortFunction.value = (a,b) => {
+        let valA = a[category.title]
+        let valB = b[category.title]
+        if (!category.usesCategoricalData) {
+            valA = parseFloat(valA)
+            valB = parseFloat(valB)
         }
-        sortCategoryID.value = category.id
-        stateStore.clearLoading()
-    }, 100)
-
+        if (valA > valB) return sortReversed.value ? -1 : 1
+        if (valA < valB) return sortReversed.value ? 1 : -1
+        return 0
+    }
+    sortCategoryID.value = category.id
+    
+    await stateStore.clearLoading()
 }
 
 function toggleDisableEnable (category) {
diff --git a/src/components/LoadingModal.vue b/src/components/LoadingModal.vue
index 9c914f0..d053ffd 100644
--- a/src/components/LoadingModal.vue
+++ b/src/components/LoadingModal.vue
@@ -1,19 +1,19 @@
 <template>
     <div v-if="loadingReason" class="modal-mask loading modal-container">
         <div class="message-container anim-pulse">
-            <span>{{ loadingReason }}</span><br>
-            <span class="icon"><faicon icon="fa-solid fa-spinner" class="anim-rotate-step-8" /></span>
+            <span class="icon me-2"><faicon icon="fa-solid fa-spinner" class="anim-rotate-step-8" /></span>
+            <span>{{ loadingReason }}</span>
         </div>
     </div>
 </template>
 
 <script setup>
-import { storeToRefs } from "pinia"
+import { storeToRefs } from "pinia";
 
-import {useStateStore} from "@/store/StateStore"
+import {useStateStore} from "@/store/StateStore";
 
-const stateStore = useStateStore()
-const {loadingReason} = storeToRefs(stateStore)
+const stateStore = useStateStore();
+const { loadingReason } = storeToRefs(stateStore);
 
 </script>
 
@@ -31,6 +31,12 @@ const {loadingReason} = storeToRefs(stateStore)
     }
 
     .message-container {
-        color: black;
+        color: white;
+        white-space: nowrap;
+        height: 40px;
+        display: flex;
+        // Align in middle vertically
+        justify-content: center; /*x-axis*/
+        align-items: center; /*y-axis*/
     }
 </style>
\ No newline at end of file
diff --git a/src/components/plot-layouts/PCPlot/PCPlot.vue b/src/components/plot-layouts/PCPlot/PCPlot.vue
index 58d506e..1b07f25 100644
--- a/src/components/plot-layouts/PCPlot/PCPlot.vue
+++ b/src/components/plot-layouts/PCPlot/PCPlot.vue
@@ -3,7 +3,7 @@
         <div ref="pcpPlot" style="height: 100%; position: relative;" class="svg-container">
             <!-- Raster rendering layer -->
             <div v-if="PCPStore.renderingType === 'raster'" style="width: 100%; height: 100%;">
-                <PCPlotPathLayerRaster />
+                <PCPlotPathLayerRaster ref="rasterLayer" />
             </div>
             <svg 
                 ref="plotCanvas"  
@@ -26,7 +26,9 @@
                     <!-- Vector rendering layer -->
                     <PCPlotPathLayerVector />
 
+                    <!-- Raster export image -->
                     <image v-if="PCPStore.renderingType === 'raster' && pathsDataUrl" :href="pathsDataUrl" width="100%" height="100%" :y="getPlotYBounds()[0]" />
+                    
 
                     <!-- Axis group. Filter for enabled, sort by position, position using index. -->
                     <g 
@@ -93,7 +95,7 @@
 </template>
 
 <script setup>
-import { reactive, ref, onMounted, onUpdated, inject, computed, watch} from "vue"
+import { reactive, ref, onMounted, onUpdated, inject, computed, watch, nextTick} from "vue"
 import { storeToRefs } from "pinia"
 
 import { saveAs } from "file-saver"
@@ -139,6 +141,7 @@ const dataExcluded = ref([])
 // Layout references
 const plotCanvas = ref(null)
 const pcpPlot = ref(null)
+const rasterLayer = ref(null)
 
 const plotParameters = reactive({
     padding: 100,
@@ -336,23 +339,38 @@ function getSelectedCategoryTitle () {
     return selectedCategory.value ? selectedCategory.value.title : null
 }
 
-function handleExportRequest (format) {
-    if (activeView.value !== 'pcp') return
+async function handleExportRequest (format) {
+    if (activeView.value !== 'pcp') return;
 
     if (format === 'png') {
-        exportPNG()
+
+        if (PCPStore.renderingType !== 'raster') {
+            const errorPopup = new Popup('error', 'Invalid export configuration', 
+                'To export to PNG, first change render mode to "Rasterized" under the Plot Options section in the menu.' +
+            '\n\nAlternatively, you can export to SVG.')
+            layoutStore.queuePopup(errorPopup)
+            return
+        }
+
+        try {
+            await rasterLayer.value.generateDataUrl();
+            await nextTick();
+            await exportPNG();
+        } finally {
+            PCPStore.pathsDataUrl = null;
+        }
     } 
     else if (format === 'svg') {
-        exportSVG()
+        exportSVG();
     }
     else {
-        throw new Error('Unknown format in export request')
+        throw new Error('Unknown format in export request');
     }
 }
 
-function exportPNG () {
+async function exportPNG () {
     const csvElement = plotCanvas.value
-    saveSvgAsPng(csvElement, 'PCPlot.png', {encoderOptions: 1, backgroundColor: 'white', scale: 2})
+    await saveSvgAsPng(csvElement, 'PCPlot.png', {encoderOptions: 1, backgroundColor: 'white', scale: 2})
 }
 
 function exportSVG () {
diff --git a/src/components/plot-layouts/PCPlot/PCPlotPathLayerRaster.vue b/src/components/plot-layouts/PCPlot/PCPlotPathLayerRaster.vue
index 59a1436..f53f2e7 100644
--- a/src/components/plot-layouts/PCPlot/PCPlotPathLayerRaster.vue
+++ b/src/components/plot-layouts/PCPlot/PCPlotPathLayerRaster.vue
@@ -4,9 +4,9 @@
 </template>
 
 <script setup>
-import {onMounted, ref, inject, watch} from "vue"
-import { storeToRefs } from "pinia"
-import * as d3 from "d3"
+import { onMounted, ref, inject, watch, nextTick } from "vue";
+import { storeToRefs } from "pinia";
+import * as d3 from "d3";
 
 // Stores
 import {useDataStore} from "../../../store/DataStore"
@@ -14,6 +14,10 @@ import {usePCPStore} from "../../../store/PCPStore"
 import {useOptionsStore} from "../../../store/OptionsStore"
 import {useStateStore} from "../../../store/StateStore"
 
+defineExpose({
+    generateDataUrl
+})
+
 // Store references
 const dataStore = useDataStore()
 const PCPStore = usePCPStore()
@@ -37,11 +41,12 @@ eventBus.on('Router.TabChange', (viewName) => {
 })
 
 // Canvas draw variables
-let pathCanvas = document.createElement('canvas')
+let pathCanvas = document.createElement('canvas')   // Is not appended to DOM
 let ctx = pathCanvas.getContext('2d')
 let redrawTimerID = null
 
 onMounted(() => {
+    canvasContainer.value.appendChild(pathCanvas);
     resizeCanvas()
 })
 
@@ -62,6 +67,14 @@ watch(() => dataStore.enabledCategoriesCount, () => {
     restartRedrawCountdown()
 })
 
+async function generateDataUrl () {
+    await stateStore.setLoading('Generating dURL');
+    const dUrl = pathCanvas.toDataURL();
+    PCPStore.pathsDataUrl = dUrl;
+
+    await stateStore.clearLoading();
+}
+
 function restartRedrawCountdown () {
     if (PCPStore.renderingType !== 'raster') return
     if (stateStore.activeView !== 'pcp') return
@@ -78,69 +91,83 @@ function restartRedrawCountdown () {
     }, refreshDelay)
 }
 
-function draw () {
-    if (PCPStore.renderingType !== 'raster') return
-    stateStore.loadingReason = 'Redrawing PCP canvas'
-    const t_draw_start = performance.now()
-    PCPStore.pathsDataUrl = null
-
-    setTimeout(() => {
-        ctx.clearRect(0, 0, canvasContainer.value.offsetWidth, canvasContainer.value.offsetHeight)
-        ctx.setTransform(resolution.value,0,0,resolution.value,0,0);
-
-        const renderData = (d, color, opacity) => {
-            ctx.beginPath();
-            lineGenerator(d)
-            ctx.lineWidth = 1;
-            ctx.globalAlpha = opacity;
-            ctx.strokeStyle = color
-            ctx.stroke();
-            ctx.closePath();
-        }
+async function draw () {
+    if (PCPStore.renderingType !== 'raster') return;
+    await stateStore.setLoading('Redrawing PCP canvas');
+    const t_draw_start = performance.now();
+    PCPStore.pathsDataUrl = null;
 
-        // Render excluded data
-        if (!optionsStore.hideExcluded) {
-            data.value
-                .filter(d => !dataStore.dataPointFilterCheck(d))
-                .forEach(d => renderData(d, '#bfbfbf', optionsStore.excludedDataOpacity))
-        }
+    ctx.clearRect(0, 0, canvasContainer.value.offsetWidth, canvasContainer.value.offsetHeight);
+    ctx.setTransform(resolution.value,0,0,resolution.value,0,0);
+
+    let includedDataArray = [];
+    let excludedDataArray = [];
+
+    for (let i = 0; i < data.value.length; i++) {
+        let d = data.value[i];
 
-        // Render included data
-        data.value
-            .filter(dataStore.dataPointFilterCheck)
-            .forEach(d => renderData(d, getLineColor(d), optionsStore.includedDataOpacity)) 
+        // Check if included
+        if (dataStore.dataPointFilterCheck(d)) {
+            includedDataArray.push(d);
+        } else {
+            excludedDataArray.push(d);
+        }   
+    }
+
+    if (!optionsStore.hideExcluded) await batchRender(excludedDataArray, optionsStore.excludedDataOpacity, '#bfbfbf');
+    await batchRender(includedDataArray, optionsStore.includedDataOpacity);
+
+    const t_draw_end = performance.now();
+    console.debug(`Draw time: ${(t_draw_end - t_draw_start)/1000} [s]`);
+
+    await stateStore.clearLoading();
+    return 
+}
 
-        stateStore.clearLoading()
+function renderLine (d, color, opacity) {
+    ctx.beginPath();
+    lineGenerator(d);
+    ctx.lineWidth = 1;
+    ctx.globalAlpha = opacity;
+    ctx.strokeStyle = color;
+    ctx.stroke();        
+}
 
-        const t_draw_end = performance.now()
-        console.debug(`Draw time: ${(t_draw_end - t_draw_start)/1000} [s]`)
+async function batchRender (dataArray, opacity, overrideColor = null) {
+    let dataArrayLength = dataArray.length;
+    let chunkSize = dataArrayLength / getChunkCount(dataArrayLength);
+    for (let i = 0; i < dataArrayLength; i += chunkSize) {
+        let chunk = dataArray.slice(i, i + chunkSize);
+        await Promise.all(chunk.map(d => renderLine(d, overrideColor ? overrideColor : getLineColor(d), opacity)));
 
-        const dUrl = pathCanvas.toDataURL()
-        const t_draw_post_url = performance.now()
-        console.log(`dUrl generated in ${(t_draw_post_url - t_draw_end) / 1000} seconds`)
-        PCPStore.pathsDataUrl = dUrl
+        // Pause until next chunk 
+        await new Promise(resolve => setTimeout(resolve, 0));
+    }
+}
 
-    }, 50)
+function getChunkCount (dataArrayLength) {
+    let count = parseInt(Math.max(10,Math.min(50, dataArrayLength/250)));
+    return count;
 }
 
-function resizeCanvas () {
+async function resizeCanvas () {
     if (PCPStore.renderingType !== 'raster') return
     if (!canvasContainer.value) return
     PCPStore.pathsDataUrl = null	// Triggers the image in PCP to become hidden
-    setTimeout( () => {
-        const w = canvasContainer.value.offsetWidth
-        const h = canvasContainer.value.offsetHeight
-        pathCanvas.width = w * resolution.value
-        pathCanvas.height = h * resolution.value
-        pathCanvas.style.width = w + 'px'
-        pathCanvas.style.height = h + 'px'
-        restartRedrawCountdown()
-    }, 250)
 
+    await nextTick();
+
+    const w = canvasContainer.value.offsetWidth
+    const h = canvasContainer.value.offsetHeight
+    pathCanvas.width = w * resolution.value
+    pathCanvas.height = h * resolution.value
+    pathCanvas.style.width = w + 'px'
+    pathCanvas.style.height = h + 'px'
+    restartRedrawCountdown()
 }
 
 function lineGenerator(d) {
-    let dataCats = Object.keys(d)
+    let dataCats = Object.keys(d) // TODO: Refactor potential
     let dataArray = Array(dataCats.length).fill(null)
 
     for (let i = 0; i < dataCats.length; i++) {		
diff --git a/src/components/plot-layouts/PCPlot/PCPlotPathLayerVector.vue b/src/components/plot-layouts/PCPlot/PCPlotPathLayerVector.vue
index 6b8e320..7cf6966 100644
--- a/src/components/plot-layouts/PCPlot/PCPlotPathLayerVector.vue
+++ b/src/components/plot-layouts/PCPlot/PCPlotPathLayerVector.vue
@@ -31,8 +31,10 @@ import {truncateDecimals} from "@/utils/data-utils"
 import {useDataStore} from "../../../store/DataStore"
 import {usePCPStore} from "../../../store/PCPStore"
 import {useOptionsStore} from "../../../store/OptionsStore"
+import { useStateStore } from "@/store/StateStore"
 
 // Store references
+const stateStore = useStateStore();
 const dataStore = useDataStore()
 const PCPStore = usePCPStore()
 const optionsStore = useOptionsStore()
@@ -42,8 +44,8 @@ const {horizontalOffset, axisLength, plotYBounds} = storeToRefs(PCPStore)
 const {data} = storeToRefs(dataStore)
 
 function lineGenerator(d) {
-    let dataCats = Object.keys(d)
-    let dataArray = Array(dataCats.length).fill(null)
+    let dataCats = Object.keys(d);
+    let dataArray = Array(dataCats.length).fill(null);
 
     for (let i = 0; i < dataCats.length; i++) {		
         let c = dataStore.getCategoryWithName(dataCats[i])
diff --git a/src/components/sidemenu/import-export/ExportForm.vue b/src/components/sidemenu/import-export/ExportForm.vue
index f8f9612..8945f62 100644
--- a/src/components/sidemenu/import-export/ExportForm.vue
+++ b/src/components/sidemenu/import-export/ExportForm.vue
@@ -7,7 +7,7 @@
             <strong>Plot export</strong>
             <div class="labeled-form">
                 <span>Format: </span>
-                <select ref="formatSelector">
+                <select ref="formatSelector" @change="onImageFormatChange">
                     <option value="png">Image (PNG)</option>
                     <option value="svg">Vector graphics (SVG)</option>
                 </select>
@@ -31,25 +31,46 @@
 </template>
 
 <script setup>
-import { ref, inject } from "vue"
+import { ref, inject, watch } from "vue";
+import { storeToRefs } from "pinia";
 
-import SidebarSection from "@/components/layouts/SidebarSection.vue"
+import SidebarSection from "@/components/layouts/SidebarSection.vue";
 
-import { useDataStore } from "@/store/DataStore"
+import { useDataStore } from "@/store/DataStore";
+import { usePCPStore } from "@/store/PCPStore";
 
-const dataStore = useDataStore()
+const dataStore = useDataStore();
+const pcpStore = usePCPStore();
+
+const { renderingType } = storeToRefs(pcpStore);
 
 // DOM references
-const filteredDataCheckbox = ref(null)
-const formatSelector = ref(null)
+const filteredDataCheckbox = ref(null);
+const formatSelector = ref(null);
 
 // State
-const includeFilteredData = ref(false)
+const includeFilteredData = ref(false);
+
+const eventBus = inject('eventBus');
+
+watch(renderingType, () => {
+    if (renderingType.value === 'vector') {
+        formatSelector.value.value = 'svg';
+    } else {
+        formatSelector.value.value = 'png';
+    }
+})
 
-const eventBus = inject('eventBus')
+function onImageFormatChange (evt) {
+    if (evt.target.value === 'svg') {
+        pcpStore.renderingType = 'vector';
+    } else {
+        pcpStore.renderingType = 'raster';
+    }
+}
 
 function exportRequest (evt) {
-    eventBus.emit('ExportForm.exportFigureRequest', formatSelector.value.value)
+    eventBus.emit('ExportForm.exportFigureRequest', formatSelector.value.value);
 }
 
 function exportDataRequest (includeFiltered) {
diff --git a/src/components/sidemenu/import-export/SourceForm.vue b/src/components/sidemenu/import-export/SourceForm.vue
index 4dd3770..9c67198 100644
--- a/src/components/sidemenu/import-export/SourceForm.vue
+++ b/src/components/sidemenu/import-export/SourceForm.vue
@@ -89,11 +89,11 @@ function detectDelimiter (data) {
     throw new Error("Failed to identify delimitor automatically.")
 }
 
-function readFile () {
+async function readFile () {
     // Read the CSV file
     const file = fileInput.value.files[0] 
     if (!file) return
-    stateStore.setLoading('Parsing imported file..')
+    await stateStore.setLoading('Parsing imported file..')
     // Reset existing data state (in case another file was previously loaded)
     scatterStore.resetDataSelection() // TODO: This should ideally be in the state store.
     optionsStore.resetColorCoding()
@@ -101,9 +101,9 @@ function readFile () {
     const reader = new FileReader()
     stateStore.importedFileName = file.name
     reader.readAsText(new Blob([file], {"type": file.type}))	
-    reader.onloadend = (res) => {
+    reader.onloadend = async (res) => {
         parseCSV(res)
-        stateStore.clearLoading()
+        await stateStore.clearLoading()
     } 
 }
 
diff --git a/src/store/OptionsStore.js b/src/store/OptionsStore.js
index dae5e90..ce15d1a 100644
--- a/src/store/OptionsStore.js
+++ b/src/store/OptionsStore.js
@@ -18,7 +18,7 @@ export const useOptionsStore = defineStore('options', {
         useSimilarityColorCoding: true,
 
         // PCP lines
-        includedDataOpacity: 0.8,
+        includedDataOpacity: 1,
         excludedDataOpacity: 0,
         hideExcluded: true,
         curveType: 'line'
diff --git a/src/store/StateStore.js b/src/store/StateStore.js
index f49db5e..fb9ca3c 100644
--- a/src/store/StateStore.js
+++ b/src/store/StateStore.js
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { nextTick } from 'vue';
 
 export const useStateStore = defineStore('state', {
     state: () => ({
@@ -18,13 +19,16 @@ export const useStateStore = defineStore('state', {
     getters: {},
     actions: {
         setView(view) {
-            this.activeView = view
+            this.activeView = view;
         },
-        setLoading(reason) {
-            this.loadingReason = reason
+        async setLoading(reason) {
+            this.loadingReason = reason;
+            await nextTick();
+            return new Promise(resolve => setTimeout(resolve, 0));
         },
-        clearLoading() {
-            this.loadingReason = null
+        async clearLoading() {
+            this.loadingReason = null;
+            return new Promise(resolve => setTimeout(resolve, 0));
         }
     },
 })