tmp image show

src/clusters.js

@@ -108,8 +108,24 @@ const readData = async () => {
     }));
 }
 
+
+const showImage = (parent) => {
+    // create the image
+    const img = document.createElement('img');
+    img.src = 'plots/clusters.png';
+    img.alt = 'Clusters';
+    parent.appendChild(img);
+}
+
+const destroyImage = (parent) => {
+    const img = parent.querySelector('img');
+    img.remove();
+}
+
 async function plotClusters() {
     const parent = document.getElementById('clusters-plot');
+    // We do a little trolling on users and pretend that we already donwloaded the data by simply showing uniteractive image :)
+    showImage(parent);
     const data = await readData();
     const traces = [{
             type: 'scatter',
@@ -169,6 +185,7 @@ async function plotClusters() {
         },
     };
 
+    destroyImage(parent);
     Plotly.newPlot(parent, traces, layout);
 
     parent.on('plotly_relayout', (eventdata) => {
@@ -218,6 +235,5 @@ const getColor = (i, opacity) => {
     if (i < 0) {
         i = i * -1
     }
-    console.log(COLORS[i % COLORS.length])
     return `rgba(${COLORS[i % COLORS.length].join(',')}, ${opacity})`
 }