fix graph

1 files changed, 12 insertions, 11 deletions

diff --git a/app/client/modules/samplernn/views/samplernn.graph.js b/app/client/modules/samplernn/views/samplernn.graph.js
index e94db6c..40e47fa 100644
--- a/app/client/modules/samplernn/views/samplernn.graph.js
+++ b/app/client/modules/samplernn/views/samplernn.graph.js
@@ -71,6 +71,7 @@ class SampleRNNGraph extends Component {
     const hmax = h/2
     const epochsScaleFactor = 1 // 3/2
 
+    ctx.save()
     let X, Y
     for (var ii = 0; ii < epochsMax; ii++) {
       X = lerp((ii)/(epochsMax/(epochsScaleFactor))*(epochsScaleFactor), wmin, wmax)
@@ -80,7 +81,7 @@ class SampleRNNGraph extends Component {
       ctx.lineTo(X, h)
       ctx.lineWidth = 0.5
       // ctx.stroke()
-      if ( (ii % 5) === 0 ) {
+      if ( ((ii+1) % 6) === 0 ) {
         ctx.lineWidth = 0.5
         ctx.stroke()
         const fontSize = 12
@@ -104,7 +105,7 @@ class SampleRNNGraph extends Component {
         ctx.stroke()        
         ctx.stroke()
         ctx.stroke()        
-        ctx.setLineDash([0,0])
+        ctx.setLineDash([1,1])
         const fontSize = 12
         ctx.font = 'italic ' + (fontSize) + 'px "Georgia"'
         ctx.fillStyle = 'rgba(0,12,28,0.6)'
@@ -112,6 +113,7 @@ class SampleRNNGraph extends Component {
       // }
     }
     ctx.lineWidth = 1
+    ctx.restore()
 
     keys.forEach(key => {
       const loss = lossReport[key]
@@ -119,33 +121,32 @@ class SampleRNNGraph extends Component {
       const vg = parseFloat(loss[0].training_loss) || 5
       // console.log(vf)
       const vv = 1 - norm(vf, scaleMin, scaleMax/2)
-      ctx.lineWidth = (1-norm(vf, scaleMin, scaleMax)) * 5
+      ctx.lineWidth = (1-norm(vf, scaleMin, scaleMax)) * 4
       ctx.strokeStyle = 'rgba(' + [randrange(30,190), randrange(30,150), randrange(60,120)].join(',') + ',' + 0.8+ ')'
       let begun = false
       loss.forEach((a, i) => {
         const v = parseFloat(a.training_loss)
         if (! v) return
-        const x = lerp((i-2)/(epochsMax/(epochsScaleFactor))*(epochsScaleFactor), wmin, wmax)
+        const x = lerp((i)/(epochsMax/(epochsScaleFactor))*(epochsScaleFactor), wmin, wmax)
         const y = lerp(norm(v, scaleMin, scaleMax), hmax, hmin)
-        if (i === 0) {
-          return
-        }
         if (! begun) {
           begun = true
-          ctx.beginPath(x,y)
+          ctx.beginPath(0,0)
+          ctx.moveTo(x,y)
         } else {
-          ctx.lineTo(x,y)          
+          ctx.lineTo(x,y)      
           // ctx.stroke()
         }
       })
       ctx.stroke()
       const i = loss.length-1
       const v = parseFloat(loss[i].training_loss)
-      const x = lerp((i-2)/(epochsMax/(epochsScaleFactor))*(epochsScaleFactor), wmin, wmax)
+      const x = lerp((i)/(epochsMax/(epochsScaleFactor))*(epochsScaleFactor), wmin, wmax)
       const y = lerp(norm(v, scaleMin, scaleMax), hmax, hmin)
       const fontSize = 9
       ctx.font = 'italic ' + (fontSize) + 'px "Georgia"'
-      ctx.fillText(key, x + fontSize, y + fontSize)
+      ctx.fillStyle = 'rgba(0,12,28,0.6)'
+      ctx.fillText(key, x + 4, y + fontSize/2)
     })
   }
 }