TICKS AND WAVEFORM LINE UP

1 files changed, 17 insertions, 24 deletions

diff --git a/animism-align/frontend/views/align/components/ticks.component.js b/animism-align/frontend/views/align/components/ticks.component.js
index 69866f0..8f59c31 100644
--- a/animism-align/frontend/views/align/components/ticks.component.js
+++ b/animism-align/frontend/views/align/components/ticks.component.js
@@ -6,39 +6,32 @@ import { timestamp } from '../../../util'
 export default class Ticks extends Component {
   render() {
     let { start_ts, zoom, duration } = this.props.timeline
-    duration /= 10
     const width = window.innerWidth
 
-    let secondsPerPixel = ZOOM_STEPS[zoom] / 10 // 0.1 sec / step
-    let pixelTimeDuration = 1 / secondsPerPixel // secs per pixel
-    let widthTimeDuration = width / pixelTimeDuration // secs per pixel
-    // console.log(secondsPerPixel, pixelTimeDuration)
-    // console.log('width in seconds', widthTimeDuration)
+    let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
 
-    let secondsPerTick = ZOOM_LABEL_STEPS[zoom] // secs
-    let pixelsPerLabel = secondsPerTick * pixelTimeDuration
-    let pixelsPerTick = ZOOM_TICK_STEPS[zoom]
-    // console.log('pixels per label', pixelsPerLabel)
+    let widthTimeDuration = window.innerWidth * secondsPerPixel // secs per pixel
 
-    let subdivision = secondsPerTick
-    while (pixelsPerLabel < 200) {
-      pixelsPerLabel *= 2
-      pixelsPerTick *= 2
-      subdivision *= 2
-    }
+    let timeMin = start_ts
+    let timeMax = Math.min(start_ts + widthTimeDuration, duration)
+    let timeWidth = timeMax - timeMin
+
+    let pixelMin = timeMin / secondsPerPixel
+
+    let secondsPerLabel = ZOOM_LABEL_STEPS[zoom] // secs
+    let pixelsPerLabel = secondsPerLabel / secondsPerPixel
+    let secondsPerTick = ZOOM_TICK_STEPS[zoom]
+    let pixelsPerTick = secondsPerTick / secondsPerPixel
 
-    // console.log('start ts', start_ts)
-    let pixelOffset = (start_ts / secondsPerPixel)
-    let pixelRemainder = pixelOffset % pixelsPerLabel
-    let startOffset = pixelsPerLabel - pixelRemainder
-    let startTiming = (pixelOffset + startOffset) * secondsPerPixel
+    let startOffset = pixelsPerLabel - (pixelMin % pixelsPerLabel)
+    let startTiming = (pixelMin + startOffset) * secondsPerPixel
 
-    let labelCount = Math.ceil(width / pixelsPerLabel) + 2
+    let labelCount = Math.ceil(width / pixelsPerLabel) + 1
     let offset, timing, tickLabels = [], ticks = []
     for (var i = -1; i < labelCount; i++) {
       offset = i * pixelsPerLabel + startOffset - 20
       if (offset + 20 > width) continue
-      timing = i * subdivision + startTiming
+      timing = i * secondsPerLabel + startTiming
       if (timing > duration) {
         break
       }
@@ -52,7 +45,7 @@ export default class Ticks extends Component {
       )
     }
 
-    let durationOffset = duration / secondsPerPixel - pixelOffset
+    let durationOffset = duration / secondsPerPixel - pixelMin
     if (timing > duration) {
       tickLabels.push(
         <div className='tickLabel tickLabelTotal' key={"tickLabel_total"}