tsviewer 0.1.0 → 1.0.3

package/src/components/TSViewerCanvas.vue

@@ -1,793 +0,0 @@
-<template>
-  <div class="timeseries-viewer-canvas">
-
-    <div id="canvasWrapper">
-      <timeseries-plot-canvas
-        ref="plotCanvas"
-        :c-width="cWidth"
-        :c-height="cHeight"
-        :start="start"
-        :ts_start="tsStart"
-        :ts_end="tsEnd"
-        :duration="duration"
-        :constants="constants"
-        :rs-period="rsPeriod"
-        :global-zoom-mult="globalZoomMult"
-        @channelsInitialized="channelsInitialized"
-        @setGlobalZoom="setGlobalZoom"
-      >
-        <canvas
-          id="axisArea"
-          ref="axisArea"
-          slot="axisCanvas"
-          class="canvas"
-          :width="_cpCanvasScaler(cWidth, pixelRatio, 0)"
-          :height="_cpCanvasScaler(cHeight, pixelRatio,0)"
-          :style="canvasStyle1"
-        />
-        <canvas
-          id="annArea"
-          ref="annArea"
-          slot="annCanvas"
-          class="canvas"
-          :width="_cpCanvasScaler(cWidth, pixelRatio, 0)"
-          :height="_cpCanvasScaler(pHeight, pixelRatio,0)"
-          :style="canvasStyle2"
-        />
-      </timeseries-plot-canvas>
-
-      <canvas
-        id="cursorArea"
-        ref="cursorArea"
-        class="canvas"
-        :width="_cpCanvasScaler(cWidth + 5, pixelRatio, 0)"
-        :height="_cpCanvasScaler(cHeight, pixelRatio,0)"
-        :style="canvasStyle3"
-      />
-
-<!--      <timeseries-annotation-canvas-->
-<!--        ref="annCanvas"-->
-<!--        :c-width="cWidth"-->
-<!--        :c-height="cHeight"-->
-<!--        :constants="constants"-->
-<!--        :annotations-canvas="this.$refs.annArea"-->
-<!--        :pixel-ratio="pixelRatio"-->
-<!--        :rs-period="rsPeriod"-->
-<!--        :start="start"-->
-<!--        :duration="duration"-->
-<!--        :ts-end="tsEnd"-->
-<!--        :pointer-mode="pointerMode"-->
-<!--        @annLayersInitialized="onAnnLayersInitialized"-->
-<!--        @annotationsReceived="onAnnotationsReceived"-->
-<!--        @closeAnnotationLayerWindow="onCloseAnnotationLayerWindow"-->
-<!--        @updateAnnotation="onUpdateAnnotation"-->
-<!--      />-->
-
-      <canvas
-        id="iArea"
-        ref="iArea"
-        class="canvas"
-        :width="_cpCanvasScaler(cWidth, pixelRatio, 0)"
-        :height="_cpCanvasScaler(cHeight, pixelRatio,0)"
-        :style="canvasStyle1"
-        tabindex="-1"
-        @wheel="_onMouseWheel"
-        @mousemove="_onMouseMove"
-        @mousedown="_onMouseDown"
-        @mouseup="_onMouseUp"
-        @mouseout="_onMouseOut"
-        @mouseenter="_onMouseEnter"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-/* eslint-disable no-case-declarations */
-    import { find, propEq } from 'ramda'
-    import ViewerActiveTool from '@/mixins/viewer-active-tool'
-    import Request from '@/mixins/request'
-    import TimeseriesPlotCanvas from '@/components/TSPlotCanvas.vue'
-    export default {
-        name: 'TimeseriesViewerCanvas',
-        components:{
-          TimeseriesPlotCanvas
-            // 'timeseries-annotation-canvas': () => import('@/components/viewers/TSViewer/TSAnnotationCanvas.vue')
-        },
-        mixins: [
-            Request,
-            ViewerActiveTool
-        ],
-        props: {
-            windowHeight: Number,
-            windowWidth: Number,
-            duration: Number,
-            start: Number,
-            cHeight: Number,
-            cWidth: Number,
-            globalZoomMult: Number,
-            constants: Object,
-            tsStart: Number,
-            tsEnd: Number,
-            cursorLoc: Number,
-        },
-        computed: {
-            viewerChannels: function() {
-              return this.$store.getters.viewerChannels
-            },
-            viewerAnnotations: function() {
-              return this.$store.getters.viewerAnnotations
-            },
-            viewerActiveTool: function() {
-              return this.$store.getters.viewerActiveTool
-            },
-            pHeight: function() {
-                return this.cHeight -20;
-            },
-            cursorWidth: function() {
-                return this.cWidth + this.constants['CURSOROFFSET']
-            },
-            blurCanvas: function() {
-                return this.$refs.blurCanvas
-            },
-            canvasStyle1: function() {
-                return {
-                    width: this.cWidth  + 'px',
-                    height: this.cHeight + 'px'
-                }
-            },
-            canvasStyle2: function() {
-                return {
-                    width: this.cWidth  + 'px',
-                    height: this.pHeight + 'px'
-                }
-            },
-            canvasStyle3: function() {
-                return {
-                    width: this.cursorWidth  + 'px',
-                    height: this.cHeight + 'px'
-                }
-            },
-        },
-        watch: {
-            cHeight: function () {
-                this.resize()
-            },
-            cWidth: function () {
-                this.resize()
-            },
-            start: function() {
-                this.renderAll()
-            },
-            duration: function() {
-                this.$refs.plotCanvas.invalidate()
-                this.updateRsPeriod(this.cWidth, this.duration)
-                this.renderAll()
-            },
-            globalZoomMult: function() {
-                this.$nextTick(() => {
-                    this.$refs.plotCanvas.throttledDataRender()
-                })
-            },
-            viewerChannels: function () {
-                this.$nextTick(() => {
-                    this.renderAll()
-                })
-            },
-            pointerMode: function () {
-              this.$refs.iArea.removeAttribute('col_resize');
-              this.$refs.iArea.removeAttribute('active');
-              this.$refs.iArea.removeAttribute('point')
-              switch (this.pointerMode) {
-                case 'cursor_hover':
-                  console.log('hover')
-                  this.$refs.iArea.removeAttribute('point')
-                  this.$refs.iArea.setAttribute('cursor_hover', true)
-                  break
-                case 'annResize-left':
-                  console.log('left')
-                  this.$refs.iArea.setAttribute('col_resize', true)
-                  break
-                case 'annResize-right':
-                  console.log('right')
-                  this.$refs.iArea.setAttribute('col_resize', true)
-                  break
-                case 'annSelect':
-                  this.$refs.iArea.setAttribute('active', true)
-                  break
-                case 'pan':
-                  break;
-                case 'pointer':
-                  this.$refs.iArea.setAttribute('point', true);
-                  break;
-                case 'annotate':
-                  this.$refs.iArea.setAttribute('point', true);
-                  break;
-                default:
-                  console.log('other')
-                  this.$refs.iArea.removeAttribute('point');
-                  this.$refs.iArea.removeAttribute('cursor_hover');
-                  break
-              }
-              this.$nextTick(() => {
-                this.renderAnnotationCanvas()
-              })
-            }
-        },
-        data: function () {
-            return {
-                summary: {},
-                rsPeriod:0,
-                pageSize:0,
-                lastrRsUpdate:0,
-                pixelRatio: 1,                   // Pixel Ratio of screen (1 for regular, >1 for high-res screens)
-                mouseDown: false,
-                resizeClicked: false,
-                pointerMode: 'pan',
-                trackDirection: false,
-                startDragCoord: {x: 0, y: 0},
-                defaultLabels: ['Event', 'Artifact', 'Seizure', 'Mark', 'Stim On', 'Stim Off', 'Start', 'Stop'],
-                labelSelect: 0
-            }
-        },
-        mounted: function () {
-            this.pixelRatio = this.getScreenPixelRatio();
-        },
-        methods: {
-            // resetFocusedAnnotation: function() {
-            //   this.$refs.annCanvas.resetFocusedAnnotation()
-            // },
-            // createAnnotationLayer: function(newLayer) {
-            //     this.$refs.annCanvas.createAnnotationLayer(newLayer)
-            // },
-            // getNextAnnotation: function() {
-            //     let cursorOffset = (this.cursorLoc*this.cWidth - this.constants['CURSOROFFSET']) * this.rsPeriod
-            //     let nextAnn = this.$refs.annCanvas.findNextAnnotation(this.start + cursorOffset)
-            //     return nextAnn.start - cursorOffset
-            // },
-            // getPreviousAnnotation: function() {
-            //     let cursorOffset = (this.cursorLoc*this.cWidth - this.constants['CURSOROFFSET']) * this.rsPeriod
-            //     let nextAnn = this.$refs.annCanvas.findPreviousAnnotation(this.start + cursorOffset)
-            //     return nextAnn.start - cursorOffset
-            // },
-            // onUpdateAnnotation: function(annotation) {
-            //   this.$emit('updateAnnotation', annotation)
-            // },
-            // onCloseAnnotationLayerWindow: function() {
-            //     this.$emit('closeAnnotationLayerWindow')
-            // },
-            onAnnotationsReceived: function() {
-                this.renderAll(100)
-            },
-            onAnnLayersInitialized: function() {
-                this.$emit('annLayersInitialized')
-            },
-            setGlobalZoom: function(value) {
-                this.$emit('setGlobalZoom', value)
-            },
-            channelsInitialized: function(channels) {
-                this.$emit('channelsInitialized', channels)
-            },
-            _onMouseWheel: function(e) {
-                e.stopPropagation();
-                e.preventDefault();
-                if(e.shiftKey) {
-                    if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
-                        if (e.deltaY >0) {
-                            this.$emit('setDuration', this.duration*1.1 )
-                        } else {
-                            this.$emit('setDuration', this.duration/1.1 )
-                        }
-                    }
-                }else{
-                    if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
-                        if (e.deltaY > 0 ) {
-                            this.$emit('setGlobalZoom',this.globalZoomMult*1.2);
-                        } else {
-                            this.$emit('setGlobalZoom',this.globalZoomMult/1.2);
-                        }
-                    }
-                }
-            },
-            _onMouseUp: function(e) {
-                this.resizeClicked = false;
-                this.mouseDown = false;
-                switch (this.pointerMode) {
-                  case 'pointer':
-                    this.clearICanvas()
-                    const append = e.metaKey;
-                    const yEnd = e.clientY - this.$refs.iArea.getBoundingClientRect().top
-                    const yStart = this.startDragCoord.y - this.$refs.iArea.getBoundingClientRect().top
-                    const channels = this.viewerChannels.map(channel => {
-                        if (append === false) {
-                            channel.selected = false
-                        }
-                        if( (channel.rowBaseline > yStart && channel.rowBaseline < yEnd) ||
-                                (channel.rowBaseline < yStart && channel.rowBaseline > yEnd)) {
-                                    channel.selected = true
-                        }
-                        return channel
-                        })
-                    this.$store.dispatch('setChannels', channels)
-                    break
-                  case 'annSelect':
-                    this.clearICanvas()
-                    // this.$refs.annCanvas.selectFocusedAnn()
-                    break
-                  case 'annotate':
-                    let curLIndex = null;
-                    for (let i=0; i<this.viewerAnnotations.length; i++) {
-                      if (this.viewerAnnotations[i].selected) {
-                        curLIndex = i;
-                        break;
-                      }
-                    }
-                    // No layers
-                    if (curLIndex === null) {
-                      return;
-                    }
-                    const selectedChannels = this.$store.getters['viewerSelectedChannels']
-                    const allChannels = selectedChannels.length === this.viewerChannels.length || selectedChannels.length === 0
-                    const duration = (e.clientX - this.startDragCoord.x) * this.rsPeriod
-                    const startTime = this.startDragTimeStamp + ( (this.startDragCoord.x - this.$refs.iArea.getBoundingClientRect().left) * this.rsPeriod)
-                    const newAnn = {
-                      name: '',
-                      id: null,
-                      label: this.defaultLabels[this.labelSelect],
-                      description: '',
-                      start: startTime,
-                      duration: duration,
-                      end: startTime + duration,
-                      cStart: null,
-                      cEnd: null,
-                      selected: true,
-                      channelIds: selectedChannels,
-                      allChannels: allChannels,
-                      layer_id: this.viewerAnnotations[curLIndex].id,
-                      userId: null
-                    };
-                    this.$store.dispatch('setActiveAnnotation', newAnn)
-                    this.$emit("addAnnotation", startTime, duration, allChannels, this.defaultLabels[this.labelSelect], '', this.viewerAnnotations[curLIndex] )
-                    break;
-                  case 'annResize-left':
-                  case 'annResize-right':
-                    // this.$refs.annCanvas.onMouseUp()
-                }
-            },
-            clearICanvas: function() {
-              const iCanvas = this.$refs.iArea;
-              const ctx = iCanvas.getContext('2d');
-              ctx.clearRect(0, 0, this.cWidth, this.cHeight);
-            },
-            _onMouseDown: function(evt) {
-                this.mouseDown = true;
-                this.startDragTimeStamp = this.start
-                this.startDragCoord.x = evt.clientX
-                this.startDragCoord.y = evt.clientY
-                // switch(this.pointerMode) {
-                //     case 'annResize-left':
-                //     case 'annResize-right':
-                //         this.resizeClicked = true
-                //         this.$refs.annCanvas.onMouseDown(evt.clientX - cCoord.left, evt.clientY - cCoord.top)
-                //         break;
-                // }
-            },
-            _onMouseOut: function() {
-                this.mouseDown = false;
-            },
-            _onMouseEnter: function(e) {
-                if (e.buttons === 1) {
-                    this.mouseDown = true;
-                } else {
-                    this.mouseDown = false;
-                }
-            },
-            _onMouseMove: function(e) {
-                e.preventDefault();
-                e.stopPropagation();
-                switch (this.viewerActiveTool) {
-                    case 'pan':
-                        if( this.mouseDown){
-                            // Update StartTime and get new data
-                            const setStart = this.startDragTimeStamp - ((e.clientX-this.startDragCoord.x) * this.rsPeriod);
-                            this.$emit('setStart', setStart)
-                        } else {
-                          // this.pointerMode = this.$refs.annCanvas.onMouseMove(mX,mY, this.pointerMode, this.mouseDown)
-                        }
-                        break;
-                    case 'pointer':
-                        if( this.mouseDown){
-                            this.renderSelectBox(e.clientX, e.clientY);
-                        } else {
-                          // this.pointerMode = this.$refs.annCanvas.onMouseMove(mX,mY, this.pointerMode , this.mouseDown)
-                        }
-                        break;
-                    case 'annotate':
-                      if( this.mouseDown && this.pointerMode == 'annotate') {
-                        this.renderAnnotationBox(e.clientX)
-                      } else if (this.mouseDown && ['annResize-left', 'annResize-right'].includes(this.pointerMode))  {
-                        // this.pointerMode = this.$refs.annCanvas.onMouseMove(mX,mY, this.pointerMode, this.mouseDown)
-                        this.renderAll()
-                      } else {
-                        // this.pointerMode = this.$refs.annCanvas.onMouseMove(mX,mY, this.pointerMode, this.mouseDown)
-                      }
-                      break;
-                }
-            },
-            resize: function() {
-                this.updateRsPeriod(this.cWidth, this.duration)
-                this.renderAll(25)
-            },
-            updateRsPeriod: function(w, d) {
-                const oldRs = this.rsPeriod;
-                const newPeriod = (d / w);
-                if (newPeriod !== oldRs) {
-                    this.invalidateCache = true;
-                    this.lastRsUpdate = Date.now();
-                    this.rsPeriod = newPeriod;
-                    this.pageSize = Math.floor(this.duration / this.constants['PAGESIZEDIVIDER']);
-                }
-            },
-            _cpCanvasScaler: function(sz, pixelRatio, offset) {
-                return pixelRatio * (sz + offset);
-            },
-            renderAll: function(delay, requestLeadingEdge = true) {
-                if (!this.renderFnc || delay !== this.renderThrottle || this.requestLeadingEdge !== requestLeadingEdge) {
-                    this.renderFnc = this.throttle(this._renderAll, delay, {leading: requestLeadingEdge} );
-                    this.renderThrottle = delay;
-                    this.requestLeadingEdge = requestLeadingEdge;
-                }
-                this.renderFnc(this);
-            },
-            // Returns a function, that, when invoked, will only be triggered at most once
-            // during a given window of time. Normally, the throttled function will run
-            // as much as it can, without ever going more than once per `wait` duration;
-            // but if you'd like to disable the execution on the leading edge, pass
-            // `{leading: false}`. To disable execution on the trailing edge, ditto.
-            throttle: function(func, wait, options) {
-                let context;
-                let args;
-                let result;
-                let timeout = null;
-                let previous = 0;
-                if (!options) options = {};
-                const later = function() {
-                    previous = options.leading === false ? 0 : Date.now();
-                    timeout = null;
-                    result = func.apply(context, args);
-                    if (!timeout) context = args = null;
-                };
-                return function() {
-                    const now = Date.now();
-                    if (!previous && options.leading === false) previous = now;
-                    const remaining = wait - (now - previous);
-                    context = this;
-                    args = arguments;
-                    if (remaining <= 0 || remaining > wait) {
-                    if (timeout) {
-                        clearTimeout(timeout);
-                        timeout = null;
-                    }
-                    previous = now;
-                    result = func.apply(context, args);
-                    if (!timeout) context = args = null;
-                    } else if (!timeout && options.trailing !== false) {
-                    timeout = setTimeout(later, remaining);
-                    }
-                    return result;
-                };
-            },
-            renderAnnotationCanvas: function() {
-              this.clearICanvas()
-              // this.$refs.annCanvas.render()
-            },
-            _renderAll: function() {
-                this.$nextTick(() => {
-                    this._renderAxis();
-                    this._renderCursor();
-                    this.$refs.plotCanvas.renderAll()
-                    // TODO: Bring back when supporting public annotations.
-                    // this.$refs.annCanvas.render()
-                })
-            },
-           // Render the X and Y axis, and time ticks
-            _renderAxis: function() {
-                const pa = this.$refs.axisArea;
-                const ctx = pa.getContext('2d');
-                ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
-                // clear canvas
-                ctx.clearRect(0, 0, this.cWidth, this.cHeight);
-                ctx.stroke();
-                // render side/bottom line
-                ctx.beginPath();
-                ctx.lineWidth = 1;
-                ctx.moveTo(this.constants.XOFFSET+0.5, 0.5);
-                ctx.lineTo(this.constants.XOFFSET+0.5, (this.pHeight +0.5));
-                ctx.lineTo(this.cWidth+0.5, (this.pHeight+0.5));
-                ctx.stroke();
-                // Render y-ticks
-                let tickOffset = (((this.pHeight/(2*this.nrVisibleChannels))+0.5)<<1)>>1;
-                ctx.lineWidth=0.5;
-                for (let i = 0; i< this.nrVisibleChannels; i++) {
-                    ctx.beginPath();
-                    ctx.moveTo(this.constants.XOFFSET - 2, tickOffset);
-                    ctx.lineTo(this.constants.XOFFSET + 2, tickOffset);
-                    ctx.stroke();
-                    tickOffset += this.pHeight/this.nrVisibleChannels;
-                }
-                // --- --- --- --- ---
-                // Render x-ticks
-                const gridSpacing = this.constants['XGRIDSPACING'] * Math.ceil(this.duration / 100000000);
-                const nrGridLines = Math.ceil(this.duration / gridSpacing) + 1;
-                const labelDecimator = Math.ceil( this.constants['NRPXPERLABEL'] / (gridSpacing / this.rsPeriod));
-                let curXLabelIdx = 1;
-                // XLOC1 is time to first timeIndicator line
-                const xLoc1 = (gridSpacing - (this.start % gridSpacing) ) % gridSpacing;
-                // Iterate over all potential time-lines
-                for(let i = 0; i < nrGridLines; i++) {
-                    // actual time of the timeline = canvas start time + xLoc1 time
-                    let realX = this.start + xLoc1 + i * gridSpacing;
-                    if (realX > this.tsEnd) {
-                        break;
-                    }
-                    // curLoc is pixel coordinates of realX
-                    const realOffset = realX - this.start;
-                    const curLoc = ( this.constants['XOFFSET'] + (realOffset / this.rsPeriod) );
-                    const roundedCurLoc = Math.round(curLoc);
-                    if (roundedCurLoc > 1) {
-                        ctx.save();
-                        ctx.beginPath();
-                        ctx.lineWidth=0.5;
-                        ctx.strokeStyle='rgb(235,235,235)';
-                        ctx.moveTo(roundedCurLoc + 0.5, 0.5);
-                        ctx.lineTo(roundedCurLoc+ 0.5, this.pHeight -0.5);
-                        ctx.stroke();
-                        ctx.restore();
-                        // Render X-Label when appropriate
-                        const test = (((realX / gridSpacing) + gridSpacing / 10) % labelDecimator) |0;
-                        if( test === 1 || labelDecimator === 1 ) {
-                            ctx.beginPath();
-                            ctx.lineWidth = 1;
-                            ctx.moveTo(roundedCurLoc+ 0.5, this.pHeight - 3);
-                            ctx.lineTo(roundedCurLoc+ 0.5, this.pHeight + 3);
-                            ctx.stroke();
-                            const d = new Date(realX/1000);
-                            ctx.font = '12px sans-serif';
-                            ctx.fillStyle = 'rgb(150,150,150)';
-                            ctx.fillText(this.getUTCTimeString(d), roundedCurLoc - 20.5, this.cHeight-0.2);
-                            curXLabelIdx = curXLabelIdx + 1;
-                        }
-                    }
-                }
-            },
-            // Render the selection box on click-drag using point for selecting channels
-            renderSelectBox: function(curX, curY) {
-                const iCanvas = this.$refs.iArea;
-                const ctx = iCanvas.getContext('2d');
-                ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
-                ctx.clearRect(0, 0, this.cWidth, this.cHeight);
-                ctx.beginPath();
-                ctx.lineWidth=2;
-                ctx.strokeStyle='#295eff';
-                ctx.setLineDash([5, 5, 15, 5]);
-                const xStart = curX - iCanvas.getBoundingClientRect().left;
-                const yStart = curY - iCanvas.getBoundingClientRect().top;
-                ctx.rect(xStart, yStart, -curX+this.startDragCoord.x, -curY+this.startDragCoord.y);
-                ctx.stroke();
-            },
-            _renderCursor: function() {
-                // --- --- --- --- ---
-                // Render cursor
-                const pa = this.$refs.cursorArea;
-                const ctx = pa.getContext('2d');
-                ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
-                ctx.clearRect(0, 0, (this.cWidth + this.constants['CURSOROFFSET']), this.cHeight);
-                ctx.save()
-                ctx.beginPath();
-                ctx.fillStyle = 'red';
-                const cCursorLoc = this.cursorLoc * this.cWidth
-                if (cCursorLoc > this.constants['CURSOROFFSET']) {
-                    ctx.strokeStyle = 'red';
-                    ctx.moveTo(cCursorLoc, 0);
-                    ctx.lineTo(cCursorLoc, this.pHeight);
-                    ctx.stroke();
-                } else {
-                    ctx.moveTo(cCursorLoc, this.pHeight);
-                }
-                ctx.beginPath();
-                ctx.lineTo(cCursorLoc - 5, this.pHeight + 8);
-                ctx.lineTo(cCursorLoc + 5, this.pHeight + 8);
-                ctx.lineTo(cCursorLoc, this.pHeight );
-                ctx.fill();
-                ctx.restore();
-            },
-            // Render an annotation during dragging mouse while creating annotation
-            renderAnnotationBox: function(curX) {
-              const iCanvas = this.$refs.iArea
-              const ctx = iCanvas.getContext('2d');
-              ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
-              const annotationHeight = this.constants['ANNOTATIONLABELHEIGHT'];
-              const halfAnnotationHeight = (annotationHeight/2) |0;
-              // Find active layer
-              let curLIndex = null;
-              for (let i=0; i<this.viewerAnnotations.length; i++) {
-                if (this.viewerAnnotations[i].selected) {
-                  curLIndex = i;
-                  break;
-                }
-              }
-              // No active Layers
-              if (curLIndex === null) {
-                return;
-              }
-              ctx.save();
-              ctx.clearRect(0, 0, this.cWidth, this.cHeight);
-              ctx.lineWidth = 1;
-              // Determine if the user is adding annotation to specific channels
-              const selectedChannels = this.$store.getters['viewerSelectedChannels']
-              const allChannels = selectedChannels.length === this.viewerChannels.length || selectedChannels.length === 0
-              const xStart = curX - iCanvas.getBoundingClientRect().left;
-              const dx = -curX + this.startDragCoord.x
-              if (allChannels) {
-                ctx.fillStyle = 'rgba(0,0,0,0.1)';
-                ctx.fillRect(xStart, 0, dx, this.pHeight);
-                ctx.fillStyle = this.viewerAnnotations[curLIndex].color;
-                ctx.strokeStyle = ctx.fillStyle;
-                let lblStart = xStart -1;
-                let lblEnd = dx +2;
-                if (dx < 0) {
-                  lblStart = xStart +1;
-                  lblEnd = dx-2;
-                }
-                ctx.fillRect(lblStart, 0, lblEnd, annotationHeight);
-                ctx.setLineDash([5, 5, 5, 5]);
-                ctx.beginPath();
-                ctx.moveTo(xStart, annotationHeight);
-                ctx.lineTo(xStart, this.pHeight );
-                ctx.stroke();
-                ctx.beginPath();
-                ctx.moveTo(xStart+dx, annotationHeight);
-                ctx.lineTo(xStart+dx, this.pHeight );
-                ctx.stroke();
-              } else {
-                let minOffset = this.cHeight | 0;
-                let maxOffset = 0;
-                const channelConfig = this.viewerChannels;
-                ctx.fillStyle = this.viewerAnnotations[curLIndex].color;
-                ctx.strokeStyle=ctx.fillStyle;
-                let lblStart = xStart -1;
-                let lblEnd = dx +2;
-                if (dx < 0) {
-                  lblStart = xStart +1;
-                  lblEnd = dx-2;
-                }
-                for (let ch=0; ch< channelConfig.length; ch++) {
-                  const curChannelView = channelConfig[ch];
-                  if(curChannelView.selected && curChannelView.visible) {
-                    const channelOffset = curChannelView.rowBaseline |0;
-                    if (channelOffset < minOffset) { minOffset = channelOffset; }
-                    if (channelOffset > maxOffset) { maxOffset = channelOffset; }
-                    ctx.fillRect(lblStart, channelOffset - halfAnnotationHeight, lblEnd, annotationHeight);
-                  }
-                }
-                ctx.fillStyle = 'rgba(0,0,0,0.1)';
-                ctx.setLineDash([5, 5, 5, 5]);
-                ctx.fillRect(xStart -1, minOffset+halfAnnotationHeight,
-                  dx +2, maxOffset-minOffset -annotationHeight);
-                ctx.beginPath();
-                ctx.moveTo(xStart, minOffset +halfAnnotationHeight);
-                ctx.lineTo(xStart, maxOffset-halfAnnotationHeight );
-                ctx.moveTo(xStart+dx, minOffset +halfAnnotationHeight);
-                ctx.lineTo(xStart+dx, maxOffset -halfAnnotationHeight);
-                ctx.stroke();
-              }
-              ctx.restore();
-            },
-            getScreenPixelRatio: function() {
-                let ctx = this.$refs.iArea.getContext('2d');
-                let dpr = window.devicePixelRatio || 1
-                let bsr = ctx.webkitBackingStorePixelRatio ||
-                ctx.mozBackingStorePixelRatio ||
-                ctx.msBackingStorePixelRatio ||
-                ctx.oBackingStorePixelRatio ||
-                ctx.backingStorePixelRatio || 1;
-                return dpr / bsr;
-            },
-            getUTCTimeString: function(d) {
-                return ( ('0' + d.getUTCHours()).slice(-2) + ':' +
-                    ('0' + d.getUTCMinutes()).slice(-2) + ':' + ('0' + d.getUTCSeconds()).slice(-2) );
-            },
-            setFilters: function(payload) {
-                  let input0 = parseFloat(payload.input0)
-                  let input1 = parseFloat(payload.input1)
-                  let message = {};
-                      switch (payload.filterType) {
-                          case 'clear':
-                              message = {'channelFiltersToClear':payload.selChannels};
-                              break;
-                          case 'bandpass':
-                              let bp_center = (input0 + input1) / 2;
-                              let bp_width = Math.abs( (input1 - input0) / 2 )
-                              message = {'filter':payload.filterType, 'filterParameters': [4, bp_center, bp_width], 'channels':payload.selChannels};
-                              break;
-                          case 'highpass':
-                              message = {'filter':payload.filterType, 'filterParameters': [4, input0], 'channels':payload.selChannels};
-                              break;
-                          case 'lowpass':
-                              message = {'filter':payload.filterType, 'filterParameters': [4, input0], 'channels':payload.selChannels};
-                              break;
-                          case 'bandstop':
-                              let bs_width = 10;
-                              const bs_center = payload.notchFreq;
-                              message = {'filter':payload.filterType, 'filterParameters': [4, bs_center, bs_width], 'channels':payload.selChannels};
-                              break;
-                          default:
-                              return;
-                      }
-                  this.$refs.plotCanvas.sendFilterMessage(message)
-                  for (let i=0; i<payload.selChannels.length; i++) {
-                      let channelId = payload.selChannels[i]
-                      let channel = find(propEq('id', channelId), this.viewerChannels)
-                      if (payload.filterType === 'clear') {
-                          channel.filter = {}
-                      } else {
-                          channel.filter = {
-                              type: payload.filterType,
-                              input0: input0,
-                              input1: input1,
-                              notchFreq: payload.notchFreq
-                          }
-                      }
-                      this.$store.dispatch('updateChannel', channel)
-                  }
-                  this.$refs.plotCanvas.invalidate();
-                  this.renderAll();
-              }
-          }
-    }
-</script>
-
-<style lang="scss" scoped>
-    .timeseries-viewer-canvas {
-        display: flex;
-        background-color: white;
-        flex: 1;
-    }
-    #canvasWrapper {
-        position: relative;
-    }
-    #channelCanvas {
-        display: flex;
-    }
-    .canvas {
-        position: absolute;
-        top: 0;
-        left: 0;
-        margin-left: 5px;
-        cursor: ew-resize;
-        outline: none;
-    }
-    .canvas[active]{
-        cursor: pointer;
-    }
-    .canvas[col_resize]{
-        cursor: col-resize;
-    }
-    .canvas[point]{
-        cursor: default;
-    }
-    .canvas[cursor_hover]{
-        cursor: col-resize;
-    }
-    #cursorArea {
-        margin-left: 0;
-    }
-    #annotationPopover {
-        position: absolute;
-        opacity: 0;
-        display: none;
-        top: 75px;
-        z-index: 1000;
-        left: 400px;
-    }
-</style>