tsviewer 0.1.0

package/src/components/TSPlotCanvas.vue

@@ -0,0 +1,1868 @@
+<template>
+    <div class="timeseries-plot-canvas">
+        <canvas id="blurArea" class="canvas" ref="blurArea" 
+        :width="_cpCanvasScaler(cWidth, pixelRatio, 0)" 
+        :height="_cpCanvasScaler(pHeight, pixelRatio, 0)" 
+        :style="canvasStyle" />
+        <slot name="axisCanvas">
+        </slot>
+        <slot name="annCanvas">
+        </slot>
+        <canvas id="plotArea" class="canvas" ref="plotArea"
+            :width="_cpCanvasScaler(cWidth, pixelRatio, 0)"
+            :height="_cpCanvasScaler(pHeight, pixelRatio, 0)"
+            :style="canvasStyle">
+        </canvas>
+    </div>
+</template>
+<script>
+    import {
+        compose,
+        head,
+        propEq,
+        propOr,
+        path,
+        findIndex,
+        sum,
+        map,
+        take,
+        sortBy,
+        prop
+    } from 'ramda'
+
+    import protobuf from 'protobufjs';
+
+    export default {
+        name: 'TimeseriesPlotCanvas',
+
+        props: {
+            cHeight: Number,
+            cWidth: Number,
+            start: Number,
+            duration: Number,
+            constants: Object,
+            rsPeriod: Number,
+            ts_start: Number,
+            ts_end: Number,
+            globalZoomMult: Number,
+        },
+        watch: {
+            rsPeriod: function() {
+                this.invalidate();
+                this.requestedPages.clear();
+            },
+            viewerMontageScheme: function () {
+                this.sendMontageMessage(this.viewerMontageScheme)
+            }
+
+        },
+        computed: {
+            activeViewer: function() {
+              return this.$store.getters.activeViewer
+            },
+            viewerChannels: function() {
+              return this.$store.getters.viewerChannels
+            },
+            viewerMontageScheme: function() {
+              return this.$store.getters.viewerMontageScheme
+            },
+            canvasStyle: function() {
+              return {
+                  width: this.cWidth  + 'px',
+                  height: this.pHeight + 'px'
+              }
+            },
+            pHeight: function () {
+              return this.cHeight - 20
+            },
+            timeSeriesUrl: function() {
+              return `wss://${process.env.VUE_APP_PENNSIEVE_API_LOCATION}/streaming/discover/ts/query?session=` + this.userToken + '&package=' + encodeURIComponent(this.packageId)
+            },
+            packageId: function() {
+              return propOr('', 'packageId', this.activeViewer)
+            },
+            userToken: function() {
+              return this.$store.getters.userToken
+            }
+        },
+        data: function () {
+            return {
+                proto: {
+                    'nested': {
+                        'Event': {
+                        'fields': {
+                            'source': {
+                            'type': 'string',
+                            'id': 1
+                            },
+                            'pageStart': {
+                            'type': 'uint64',
+                            'id': 2
+                            },
+                            'pageEnd': {
+                            'type': 'uint64',
+                            'id': 3
+                            },
+                            'samplePeriod': {
+                            'type': 'double',
+                            'id': 4
+                            },
+                            'pointsPerEvent': {
+                            'type': 'uint64',
+                            'id': 5
+                            },
+                            'isResampled': {
+                            'type': 'bool',
+                            'id': 6
+                            },
+                            'data': {
+                            'rule': 'repeated',
+                            'type': 'double',
+                            'id': 7
+                            },
+                            'times': {
+                            'rule': 'repeated',
+                            'type': 'uint64',
+                            'id': 8
+                            },
+                            'spikeGroup': {
+                            'rule': 'repeated',
+                            'type': 'uint32',
+                            'id': 9
+                            }
+                        }
+                        },
+                        'Instruction': {
+                        'fields': {
+                            'command': {
+                            'type': 'string',
+                            'id': 1
+                            },
+                            'argument': {
+                            'type': 'string',
+                            'id': 2
+                            }
+                        }
+                        },
+                        'Segment': {
+                        'fields': {
+                            'startTs': {
+                            'type': 'uint64',
+                            'id': 1
+                            },
+                            'source': {
+                            'type': 'string',
+                            'id': 2
+                            },
+                            'lastUsed': {
+                            'type': 'uint64',
+                            'id': 3
+                            },
+                            'unit': {
+                            'type': 'string',
+                            'id': 4
+                            },
+                            'samplePeriod': {
+                            'type': 'double',
+                            'id': 5
+                            },
+                            'requestedSamplePeriod': {
+                            'type': 'double',
+                            'id': 6
+                            },
+                            'pageStart': {
+                            'type': 'uint64',
+                            'id': 7
+                            },
+                            'isMinMax': {
+                            'type': 'bool',
+                            'id': 8
+                            },
+                            'unitM': {
+                            'type': 'uint64',
+                            'id': 9
+                            },
+                            'segmentType': {
+                            'type': 'string',
+                            'id': 10
+                            },
+                            'nrPoints': {
+                            'type': 'uint64',
+                            'id': 11
+                            },
+                            'data': {
+                            'rule': 'repeated',
+                            'type': 'double',
+                            'id': 12
+                            },
+                            'pageEnd': {
+                            'type': 'uint64',
+                            'id': 13
+                            },
+                            'channelName': {
+                            'type': 'string',
+                            'id': 14
+                            }
+                        }
+                        },
+                        'IngestSegment': {
+                        'fields': {
+                            'channelId': {
+                            'type': 'string',
+                            'id': 1
+                            },
+                            'startTime': {
+                            'type': 'uint64',
+                            'id': 2
+                            },
+                            'samplePeriod': {
+                            'type': 'double',
+                            'id': 3
+                            },
+                            'data': {
+                            'rule': 'repeated',
+                            'type': 'double',
+                            'id': 4
+                            }
+                        }
+                        },
+                        'TimeSeriesMessage': {
+                            'fields': {
+                                'segment': {
+                                'type': 'Segment',
+                                'id': 3
+                                },
+                                'event': {
+                                'rule': 'repeated',
+                                'type': 'Event',
+                                'id': 4
+                                },
+                                'instruction': {
+                                'type': 'Instruction',
+                                'id': 5
+                                },
+                                'ingestSegment': {
+                                'type': 'IngestSegment',
+                                'id': 6
+                                },
+                                'totalResponses': {
+                                'type': 'uint64',
+                                'id': 7
+                                },
+                                'responseSequenceId': {
+                                'type': 'uint64',
+                                'id': 8
+                                }
+                            }
+                        }
+                    }
+                },
+                pixelRatio: 1,
+                requestedPages: Object,
+                chData: [],
+                aSyncrequests: [],
+                aSyncPreRequests: [],
+                pageSize: 15000000,
+                viewData: {
+                    start: 0,
+                    duration: 0,
+                    channels: []
+                },
+                renderCounter: 0,
+                lastDataRender: null,
+                lastViewPageRequest: null,
+                prefetchTimer: Object,
+                prefetchDelay: 100,
+                autoScale:0,
+                channelsReady:false,
+                prevStart:0,
+                prevDuration:0,
+                websocket: Object,
+                initWebsocket: true,
+                segment: null,
+                timeSeriesMessage:null,
+                timeSeriesError:null,
+                channelsList:null,
+                catchUpRequestPages:null,
+            }
+        },
+
+        mounted: function () {
+
+            this.requestedPages = new Map();
+            this.chData = [];
+            this.aSyncrequests = [];
+            this.throttledGetRenderData = this.throttle(this.renderDataOnMessage, 250, {leading:false});
+            this.throttledDataRender = this.throttle(this._renderData, 50);
+
+            // Timer loop to prefetch pages --> initiated in requestData()
+            const that = this;
+            this.preFetchRequestFnc = function() {
+                const nrPending = that.aSyncPreRequests.length;
+                if (nrPending > 0) {
+                    if (that.requestedPages.size < 3) {
+                        that.requestDataFromServer([that.aSyncPreRequests[0]]);
+                        that.aSyncPreRequests.splice(0, 1);
+                    }
+                } else {
+                    clearInterval(that.prefetchTimer);
+                    that.isPrefetching = false;
+                }
+            }
+
+            const protobufInstance = protobuf.Root.fromJSON(this.proto)
+            this.segment = protobufInstance.Segment;
+            this.timeSeriesMessage = protobufInstance.TimeSeriesMessage
+            this.timeSeriesError = protobufInstance.TimeSeriesError
+            this.channelsList = protobufInstance.ChannelsList
+
+            this.requestedPages = new Map();
+            this.openWebsocket()
+
+        },
+
+        methods: {
+
+            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;
+                };
+            },
+            viewSegmComparator: function(a, b) {
+                if (a.startTs< b.startTs) return -1;
+                if (a.startTs > b.startTs) return 1;
+                return 0;
+            },
+            _cpCanvasScaler: function(sz, pixelRatio, offset) {
+                return pixelRatio * (sz + offset);
+            },
+            getScreenPixelRatio: function() {
+                let ctx = this.$refs.plotArea.getContext('2d');
+                let dpr = window.devicePixelRatio || 1
+                let bsr = ctx.webkitBackingStorePixelRatio ||
+                ctx.mozBackingStorePixelRatio ||
+                ctx.msBackingStorePixelRatio ||
+                ctx.oBackingStorePixelRatio ||
+                ctx.backingStorePixelRatio || 1;
+
+                return dpr / bsr;
+            },
+            getChannelId: function(channel) {
+                const isViewingMontage = this.viewerMontageScheme !== 'NOT_MONTAGED'
+                let id = propOr('', 'id', channel)
+                let list = []
+                if (isViewingMontage) {
+                    list = id.split('_')
+                    id = list.length ? head(list) : id // remove channel name from id
+                }
+                return id
+            },
+            initChannels: function(channels) {
+                const chObjects = [];
+                if (channels.length > 0) {
+
+                    const channelConfig = []
+
+                    for (let ic=0; ic<channels.length; ic++) {
+                        const curC = channels[ic].content;
+                        const curId = this.getChannelId(curC)
+                        const curChannel = {
+                            id: curId,
+                            label: curC.name,
+                            type: curC.channelType,
+                            segments: [],
+                            start: curC.start,
+                            end: curC.end,
+                            sampleFreq: curC.rate,
+                            unit: curC.unit,
+                            gaps: [], //channels[ic].gaps
+                            virtualId: curC.virtualId
+                        };
+
+                        const label = curChannel.label.split(/[ _-]/, 3)
+                        const label_prefix = label[0];
+                        let label_value = ( (label.length > 1) ? parseFloat(label[1]) : 0);
+                        label_value = ( (isNaN(label_value) ? label[1] : label_value));
+
+                        channelConfig.push({
+                            id: curChannel.id,                          // id of channel
+                            type: curChannel.type,                      // Type of channel (CONTINUOUS, UNIT)
+                            label: curChannel.label,                    // Label of channel
+                            label_split: label,                         // array of label segments
+                            label_prefix: label_prefix,                 // prefix for label
+                            label_value: label_value,                   // value for label
+                            dataSegments: [],                           // vector of segments rnages (start end ...)
+                            rank: ic,                                   // rank for determining display order
+                            visible: true,                              // channel visible in viewer?
+                            plotAgainst: null,                          // for montaging
+                            rowBaseline: null,                          // offset for centering
+                            rowScale: 1,                                // for individual zoom
+                            rowAdjust: 0,                               // offset for centering
+                            selected: false,                            // Item is selected
+                            hover: false,                               // User is hovering over channel
+                            unit: curC.unit,                            // unit of data
+                            sf: curC.rate,                              // sampling rate
+                            filter: {},                                 // filter object (type, var0, var1, notch)
+                            hideFilter: true,
+                            isEditing: false,
+                            virtualId: curChannel.virtualId
+                        });
+
+                        chObjects.push(curChannel);
+                    }
+
+                    channelConfig.sort(function(a, b) {
+
+                        // If split into more than 2 segments, just sort on entire string
+                        if (a.label_split.length > 2 || b.label_split.length > 2) {
+                            return (a.label > b.label) ? 1 : ((b.label > a.label) ? -1 : 0);
+                        }
+
+                        // If prefix is similar, sort on value
+                        if (a.label_prefix === b.label_prefix) {
+                            return (a.label_value > b.label_value) ? 1 : ((b.label_value > a.label_value) ? -1 : 0);
+                        }
+
+                        // Sort on prefix
+                        return (a.label_prefix > b.label_prefix) ? 1 : ((b.label_prefix > a.label_prefix) ? -1 : 0);
+                    } );
+
+                    // Update rank on sorted channels
+                    for (let i = 0; i < channelConfig.length; i++) {
+                        channelConfig[i].rank = i;
+                    }
+
+                    this.$store.dispatch('setChannels', channelConfig)
+                    this.$emit('channelsInitialized', channels)
+
+                }
+
+                this.computeSummary(chObjects)
+                this.chData = chObjects;
+                this.autoScale = channels.length;
+                this.channelsReady = true;
+
+                return Promise.resolve()
+
+            },
+            computeSummary: function(channels) {
+
+                if (channels.length === 0) {
+                    this.globalGaps = null
+                    return
+                }
+
+                this.globalGaps = path(['gaps', 0], channels);
+
+            },
+            // Find segment that contains timepoint val --> search over startPage property
+            segmIndexOf: function(segmArray, val, first, startAtIndex) {
+
+                if (!startAtIndex) {
+                    startAtIndex = 0;
+                }
+                let index;
+                index = this._indexOfStart(segmArray, val, startAtIndex, segmArray.length - 1, first);
+
+                if (index === -1) {
+                    index = 0;
+                } else if (index < 0) {
+                    index = -index - 2;
+                }
+                return index;
+            },
+
+            // Find segment offset in segment array
+            _indexOfStart: function(segmArray, val, min, max, firstIndex) {
+
+                /*
+                Return code status:
+                Positive number:  first index of the value
+                Negative 1 (-1):  belongs before the start of the dataset
+                Other negative value:  belongs after (-value - 2)
+                */
+                if (max < min) {
+                    let pred;
+                    if (max >= 0) {
+                        //return -max - 2;
+                        pred = max;
+                    } else {
+                        //return max;
+                        pred = -max - 2;
+                    }
+                    if (pred === -1) {
+                        return pred;
+                    }
+                    const predVal = segmArray[pred].pageStart;
+                    while (pred >= 0 && segmArray[pred].pageStart === predVal) {
+                        pred--;
+                    }
+                    pred++;
+                    return -pred - 2;
+                }
+
+                const mid = parseInt((min + max) / 2);
+
+                if (segmArray[mid].pageStart > val) {
+                    return this._indexOfStart(segmArray, val, min, mid - 1, firstIndex);
+                } else if (segmArray[mid].pageStart < val) {
+                    return this._indexOfStart(segmArray, val, mid + 1, max, firstIndex);
+                } else {
+                    let index = mid;
+                    if (firstIndex) {
+                        while (index >= 0 && segmArray[index].pageStart === val) {
+                            index--;
+                        }
+                        index++;
+                    } else {
+                        while (index < segmArray.length && segmArray[index].pageStart === val) {
+                            index++;
+                        }
+                        index--;
+                    }
+                    return index;
+                }
+            },
+            // Initiate render of data --> check visible channels and create viewData object.
+            generatePoints: function() {
+
+                // If not initialized --> return
+                if (!this.viewerChannels) {
+                    return
+                }
+
+                this.viewData.start = this.start;
+                this.viewData.duration = this.duration;
+
+                // Get hidden channels and view-ids
+                const hiddenChannels = [];
+                const showChannels = [];
+                const curChanViewIds = [];
+
+                // Get IDS from channelConfig
+                for (let i = 0; i < this.viewerChannels.length; i++) {
+                    const curConfig = this.viewerChannels[i];
+                    const id = this.getChannelId(curConfig.id)
+                    if (!curConfig.visible) {
+                        hiddenChannels.push(id);
+                    }
+                    curChanViewIds.push(id);
+                }
+
+                // Get IDS from viewData channels
+                const viewDataChIds = [];
+                for (let i = 0; i< this.viewData.channels.length; i++) {
+                const channel = this.viewData.channels[i]
+                const channelId = this.getChannelId(channel)
+                    viewDataChIds.push(channelId);
+                }
+
+                // Iterate over all channels and populate channelConfig
+                const remViewChannels = [];
+                for (let iChan = 0; iChan < this.chData.length; iChan++) {
+                    const curChan = this.chData[iChan];
+                    const curChanId = this.getChannelId(curChan)
+                    // Only return visible channels
+                    if (hiddenChannels.indexOf(curChanId) >= 0) {
+                        remViewChannels.push(curChanId);
+                    } else {
+                        showChannels.push(curChan);
+                    }
+                }
+
+                // removing channels from viewData when not shown.
+                // Iterate backwards to prevent issues of indexing
+                remViewChannels.sort();
+                for (let i=(remViewChannels.length-1); i>=0; i--) {
+                    this.splice('viewData.channels', remViewChannels[i], 1);
+                    viewDataChIds.splice(remViewChannels[i], 1);
+                }
+
+                // Get viewDataChannels
+                for (let i=0; i< showChannels.length; i++) {
+                    const curShowChannel = showChannels[i]
+                    const showChannelId = this.getChannelId(curShowChannel);
+                    const idx = viewDataChIds.indexOf(showChannelId);
+                    if (idx < 0 ) {
+                        this.viewData.channels.push({
+                            id: showChannelId,
+                            mean: null,
+                            firstRenderedIndex: 0,
+                            lastRenderedIndex: 0,
+                            blocks: []
+                        });
+
+                    }
+                }
+
+                // Request data on visible channels
+                // Only request when pageForward key is released
+                // if (!this.spacePressed && this.selectedTab === 'timeseries') {
+                this.requestData(showChannels, this.start, this.duration);
+                // }
+            },
+            // Getting data from cache and queue new reqeusts from server
+            requestData: function(showChannels, start, duration ) {
+
+                // If number of requestedpages is getting to big, reset websocket connection
+
+                // TODO: BRING BACK
+                // if (this.requestedPages.size > 20 ) {
+                //     clearTimeout(this.preFetchTime);
+                //     this.aSyncPreRequests = [];
+                //     this.reRequestPages();
+                //     this.openWebsocket();
+                //     return;
+                // }
+
+
+                // Init asnch requests for viewport pages
+                this.aSyncRequests = [];
+
+                // If we rerender the same viewport (as data comes in) --> don't change prefetch
+                let updatePrefetchPages = false
+                if (this.prevStart !== start || this.prevDuration !== duration) {
+                    this.aSyncPreRequests= []
+                    updatePrefetchPages = true
+                }
+
+                this.prevStart = start;
+                this.prevDuration = duration;
+
+                // Timestamp of first value in viewport
+                const viewDataChIds = [];
+                for (let i=0; i<this.viewData.channels.length; i++) {
+                    const cChannel = this.viewData.channels[i]
+                    viewDataChIds.push(cChannel);
+                }
+
+                // Iterate over channels and populate aSyncRequests and/or chanViewData
+                for (let iChan = 0; iChan < showChannels.length; iChan++) {
+                    let continuationSegment = false;
+                    const curChan = showChannels[iChan];
+                    const chDataSegments = curChan.segments;
+                    const curChanId = this.getChannelId(curChan)
+                    // Get dataView
+                    const idx = findIndex(propEq('id', curChanId), viewDataChIds)
+                    const chanViewData = this.viewData.channels[idx];
+                    chanViewData.blocks = [];
+
+                    // Populate chanViewData until all data in scope is added, or requested from server.
+                    // Independent of actual request, populate viewData by pageSegments.
+                    let curTime = Math.floor(start/ this.pageSize) * this.pageSize;
+                    if (curTime < 0) {
+                        curTime = 0;
+                    }
+
+                    let firstSegment = 0;
+                    let segmOffset = 0;
+                    if (chDataSegments.length > 0) {
+                        firstSegment = this.segmIndexOf(chDataSegments, curTime, true, 0);
+                    }
+
+                    // Iterate over blocks in viewport and add to chanView, or asyncRequests
+                    let endRequestTime = start + duration + this.constants['PREFETCHPAGES']*this.pageSize;
+                    if (endRequestTime > this.ts_end) {
+                        endRequestTime = this.ts_end;
+                    }
+
+                    let curSegm;
+                    if (chDataSegments.length > 0) {
+                        curSegm = chDataSegments[firstSegment];
+                    }
+                    while ((curTime < endRequestTime) || continuationSegment) {
+                        continuationSegment = false;
+
+                        // If current time == start of current page in cache then page is correct.
+                        let inRange = false;
+                        if (curSegm) {
+                            inRange = curTime >= curSegm.pageStart && curTime <= curSegm.pageEnd;
+                        }
+                        if (inRange) {
+                            /*
+                            Data is already cached
+                            */
+                            let isViewPage = curSegm.startTs < start + duration;
+
+                            segmOffset += 1;
+                            //curTime = curSegm.startTs + curSegm.nrPoints*curSegm.samplePeriod;
+                            curTime = curSegm.pageEnd;
+
+                            // Only add to viewData if segment is not a prefetch page
+                            if (isViewPage) {
+                                chanViewData.blocks.push(curSegm);
+                            }
+
+                            const prevPageTime = curSegm.pageStart;
+                            curSegm = chDataSegments[firstSegment + segmOffset];
+                            if (!this.isStreaming && curSegm && prevPageTime === curSegm.pageStart) {
+                                continuationSegment = true;
+                            }
+
+                        } else {
+                            /*
+                            Data is not present on client and needs to be requested from server
+                            */
+
+                            // Check if segment is already being requested
+                            if (this.requestedPages.get(curTime)) {
+                                curTime += this.pageSize;
+                                if (curSegm && curTime >= curSegm.pageEnd) {
+                                    while (curSegm.pageEnd < curTime) {
+                                        segmOffset += 1;
+                                        curSegm = chDataSegments[firstSegment + segmOffset];
+                                        if (!curSegm) {
+                                            break;
+                                        }
+                                    }
+                                }
+                                continue;
+                            }
+
+                            let isViewPage = curTime < start + duration;
+
+
+                            // Check if requested range is already requested by other channel --> update
+                            let isAdded = false;
+                            if (isViewPage) {
+
+                                //remove from pre-request
+                                for (let iA in this.aSyncPreRequests) {
+                                    if (this.aSyncPreRequests[iA].start === curTime) {
+                                        this.aSyncPreRequests.splice(iA, 1);
+                                        break;
+                                    }
+                                }
+
+
+                                for (let iA in this.aSyncRequests) {
+                                    if (this.aSyncRequests[iA].start === curTime) {
+                                        this.aSyncRequests[iA].channels.push(curChan);
+                                        isAdded = true;
+                                    }
+                                }
+                                if (!isAdded) {
+                                    this.aSyncRequests.push({
+                                        channels: [curChan],
+                                        start: curTime,
+                                        duration: this.pageSize,
+                                        isInViewport: true,
+                                        pixelWidth: Math.ceil(this.rsPeriod)});
+                                }
+
+
+                            } else {
+                                if (updatePrefetchPages) {
+                                    for (let iA in this.aSyncPreRequests) {
+                                        if (this.aSyncPreRequests[iA].start === curTime) {
+                                            this.aSyncPreRequests[iA].channels.push(curChan);
+                                            isAdded = true;
+                                        }
+                                    }
+                                    if(!isAdded) {
+                                        this.aSyncPreRequests.push({
+                                            channels: [curChan],
+                                            start: curTime,
+                                            duration: this.pageSize,
+                                            isInViewport: false,
+                                            pixelWidth: Math.ceil(this.rsPeriod)});
+                                    }
+                                }
+                            }
+                            curTime += this.pageSize;
+                            if (curSegm && curTime >= curSegm.pageEnd) {
+                                while (curSegm.pageEnd < curTime) {
+                                    segmOffset += 1;
+                                    curSegm = chDataSegments[firstSegment + segmOffset];
+                                    if (!curSegm) {
+                                        break;
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    // Sort the ChannelView pages
+                    chanViewData.blocks.sort(this.viewSegmComparator);
+                }
+
+                // Directly request all pages that are in the viewport
+                if (this.aSyncRequests.length > 0) {
+
+                    // order requests to make sure request with start in viewport is first.
+                    let firstRequest = 0;
+                    for (let i=0; i<this.aSyncRequests.length; i++) {
+                        if (this.aSyncRequests[i].start >= this.start && this.aSyncRequests[i].start < (this.start +this.duration)) {
+                            firstRequest = i;
+                        }
+                    }
+
+                    this.requestDataFromServer(this.aSyncRequests, firstRequest);
+                    this.lastViewPageRequest = Date.now();
+                }
+
+                // Requests Pre-fetch pages throttled, after viewport pages are available
+                if (this.aSyncPreRequests.length > 0 ) {
+                    if (!this.isPrefetching) {
+                        this.prefetchTimer = setInterval(this.preFetchRequestFnc, 150);
+                        this.isPrefetching = true;
+                    }
+                }
+            },
+            // Request pages from the Server
+            requestDataFromServer: function(requests, firstRequest = 0) {
+                // Do the actual Websocket requests.
+                if (requests.length > 0) {
+
+                    const datasetEndTime = this.ts_end;
+                        // check for last block
+                    for(let i = 0; i < requests.length; i++) {
+                        let curRequest;
+                        if (i === 0 ) {
+                            curRequest = requests[firstRequest];
+                        } else if (i === firstRequest) {
+                            curRequest = requests[0];
+                        } else {
+                            curRequest = requests[i];
+                        }
+
+                        // check for last block
+                        let requestEndTime = curRequest.start + curRequest.duration;
+                        if (requestEndTime > datasetEndTime) {
+                            requestEndTime = datasetEndTime;
+                        }
+
+                        const ws = this._websocket;
+                        if (ws && ws.readyState === 1 && curRequest.pixelWidth>0) {
+
+                            const virtualChannels = curRequest.channels.map(channel => {
+                                return { id: channel.id, name: channel.label, }
+                            })
+
+                            const req = {
+                                session: this.userToken,
+                                minMax: true,
+                                startTime: curRequest.start,
+                                endTime: requestEndTime,
+                                packageId: this.packageId,
+                                pixelWidth: curRequest.pixelWidth,
+                                virtualChannels
+                            };
+                            const reqJson = JSON.stringify(req);
+                            ws.send(reqJson);
+
+                            // ChannelCounter will capture number of expected packages for each channel
+                            // This number is set when first package arrives.
+                            const nrChannels = curRequest.channels.length;
+                            const channelCounter = new Map();
+                            for (let j=0; j < nrChannels; j++) {
+                                channelCounter.set(curRequest.channels[j].id, NaN);
+                            }
+
+                            this.requestedPages.set(curRequest.start,
+                                { count: nrChannels,
+                                    counter: channelCounter,
+                                    subPageCount: NaN,
+                                    ts: (Date.now() + 550),
+                                    inViewport: curRequest.isInViewport} );
+
+                        } else {
+                            console.log('Websocket Closed')
+                            return false;
+                        }
+                    }
+                    this.aSyncrequests = [];
+                }
+                return true;
+            },
+
+            invalidate: function() {
+                console.log('Invalidating')
+
+                clearTimeout(this.preFetchTime);
+                this.aSyncPreRequests = [];
+                this.globalGaps = [];
+                this.requestedPages.clear()
+                for (let i=0; i<this.chData.length; i++) {
+                    this.chData[i].segments = [];
+                }
+                for (let i=0; i<this.viewData.channels.length; i++) {
+                    this.viewData.channels[i].blocks = [];
+                }
+                this.renderAll()
+            },
+            // _________________
+            // RENDER METHODS
+
+            renderAll: function() {
+                this.generatePoints();
+                this._renderData();
+            },
+            // computes the channelConfig properties based on current settings of viewer.
+            _computeChannelViews: function() {
+
+                // find channel order based on rank
+                const mapped = this.viewerChannels.map(function(el, i) { return { index: i, value: el.rank }; })
+                mapped.sort(function(a, b) {return +(a.value > b.value) || +(a.value === b.value) - 1;});
+                const rankedIds = mapped.map(function(el) {return el.index;});
+                const interChannelDist = this.pHeight / this.nrVisibleChannels;
+
+                // update properties
+                //  TODO: Bring back
+                let curIdx = 0;
+                let updatedBaseline = null
+                for (let i = 0; i < rankedIds.length; i++) {
+                    const curRow = this.viewerChannels[rankedIds[i]];
+                    const oldBaseline = curRow.rowBaseline
+                    if (curRow.visible) {
+                      updatedBaseline = (0.5*interChannelDist) + curIdx * interChannelDist;
+                      // curRow.rowBaseline = (0.5*interChannelDist) + curIdx * interChannelDist;
+                        curIdx++;
+                    }
+                    if (oldBaseline != updatedBaseline) {
+                      this.$store.dispatch('updateViewChannel', {
+                        channelId: curRow.id,
+                        data: {
+                          rowBaseline: updatedBaseline
+                        }
+                      })
+
+
+                    }
+
+                }
+            },
+            // Compute canvas coordinates from datarray
+            getPointCoords: function(channelInfo, channelData, isRedraw) {
+                // Iterate over channelData on single channel ---> channelData are continuous in time
+                let segmLength = channelData.blocks.length;
+
+                // find mean of rendered data
+                switch (channelInfo.type) {
+                    case 'UNIT':
+                        if (!isRedraw) {
+                            for (let iSegm = 0; iSegm < segmLength; iSegm++) {
+
+                                const curSeg = channelData.blocks[iSegm];
+
+                                // Iterate over points in segment and set cx, cy, and cy2
+                                const curCData = curSeg.cData;
+                                const curData = curSeg.parsedData;
+                                const xOffset = this.constants['XOFFSET'];
+
+                                // create local variable for speed
+                                const length = curSeg.parsedData[0].length;
+                                const cXArray = curCData[0];
+                                const cYArray = curCData[1];
+                                const cY2Array = curCData[2];
+                                const XArray = curData[0];
+
+                                // RowBaseline is offset of channel in viewPort
+                                const rowBaseLine = channelInfo.rowBaseline | 0;
+
+                                // satrtTime
+                                const startT = this.start;
+
+                                // Pixel Period
+                                const rsP = this.rsPeriod;
+
+                                const spikeHeigth = (this.cHeight / (2 * (this.nrVisibleChannels + 1))) |0;
+
+
+                                for(let iPoint = 0; iPoint < length; iPoint++) {
+
+                                    cXArray[iPoint] = (((xOffset + (XArray[iPoint] - startT ) / (rsP))));
+                                    cYArray[iPoint] = rowBaseLine - spikeHeigth;
+                                    cY2Array[iPoint] = rowBaseLine + spikeHeigth;
+                                }
+                            }
+                        }
+                        break;
+
+                    case 'CONTINUOUS':
+                      // eslint-disable-next-line
+                        let totalPointsInMean = 0
+
+                        if (!isRedraw) {
+                            channelData.mean = 0;
+                            channelData.median = 0;
+                            for (let iSegm = 0; iSegm < segmLength; iSegm++) {
+                                const curBlock = channelData.blocks[iSegm];
+                                if (curBlock.nrValidPoints > 0) {
+                                    channelData.mean = ( curBlock.sumElem +
+                                        (totalPointsInMean * channelData.mean)) / (totalPointsInMean + curBlock.nrValidPoints);
+                                    channelData.median = ( curBlock.median +
+                                        (totalPointsInMean * channelData.median)) / (totalPointsInMean + curBlock.nrValidPoints);
+                                    totalPointsInMean += curBlock.nrValidPoints;
+                                }
+                            }
+                        }
+
+                        for (var iSegm = 0; iSegm < segmLength; iSegm++) {
+
+                            const curSeg = channelData.blocks[iSegm];
+
+                            // Find startIndex viewPort
+                            let startIndex = Math.floor((this.start - curSeg.startTs ) / curSeg.samplePeriod);
+                            curSeg.renderStartIndex = ((startIndex > 0) ? startIndex : 0)
+
+                            let endIndex = Math.floor( ((this.start + this.duration) - (curSeg.startTs + (curSeg.nrPoints*curSeg.samplePeriod))/curSeg.samplePeriod ));
+                            curSeg.renderEndIndex = endIndex >= 0 ? (curSeg.nrPoints-1) : (curSeg.nrPoints + endIndex);
+
+                            // console.log('start: ' + this.start + "   duration: " + this.duration)
+                            // console.log('render-start: ' + curSeg.renderStartIndex + "   render-end: " + curSeg.renderEndIndex)
+
+                            // Iterate over points in segment and set cx, cy, and cy2
+                            const curCData = curSeg.cData;
+                            const curData = curSeg.parsedData;
+                            const curScale = this.globalZoomMult * channelInfo.rowScale;
+                            const xOffset = this.constants['XOFFSET'];
+
+                            // create local variable for speed
+                            const length = curSeg.parsedData[0].length;
+                            const cXArray = curCData[0];
+                            const cYArray = curCData[1];
+                            const cY2Array = curCData[2];
+                            const XArray = curData[0];
+                            const YArray = curData[1];
+                            const Y2Array = curData[2];
+
+                            // RowBaseline is offset of channel in viewPort
+                            const rowBaseLine = channelInfo.rowBaseline;
+
+                            // chDatMean is mean value of channel in viewport
+                            let chDatCenterer = 0;
+                            if (this.constants['USEMEDIAN']) {
+                                chDatCenterer = channelData.median;
+                            } else {
+                                chDatCenterer = channelData.mean;
+                            }
+
+                            const rsp = this.rsPeriod;
+                            const startT = this.start;
+                            for(let iPoint = 0; iPoint < length; iPoint++) {
+
+                                cXArray[iPoint] = (((xOffset + (XArray[iPoint] - startT ) / rsp)));
+                              // console.log('xOffset: ' + xOffset + "  XArray[ipoint]: " + XArray[iPoint] + " startT: " + startT )
+                              // console.log('cXArray[ipoint]: ' + cXArray[iPoint])
+                              cYArray[iPoint] = (((rowBaseLine + (YArray[iPoint] - chDatCenterer) * curScale)));
+
+                                if (curSeg.isMinMax) {
+
+                                    // If min and max are the same --> force 1 pixel line.
+                                    if (YArray[iPoint] === Y2Array[iPoint]) {
+                                        cY2Array[iPoint] = cYArray[iPoint] + 1;
+                                    }else {
+                                        cY2Array[iPoint] = (((rowBaseLine + (Y2Array[iPoint] - chDatCenterer) * curScale)));
+                                    }
+                                }
+                            }
+                        }
+                        break;
+                }
+            },
+            _renderData: function(isRedraw=false) {
+              const ba = this.$refs.blurArea;
+              const ctxb = ba.getContext('2d');
+              ctxb.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
+              ctxb.fillStyle = 'rgb(220,220,220)'
+
+
+              const pa = this.$refs.plotArea;
+              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);
+              ctxb.clearRect(0, 0, this.cWidth, this.cHeight);
+
+              // update number of visible channels
+              const nrVisCh = this.viewerChannels.reduce((accumulator, currentValue) => {
+                if(currentValue.visible) {
+                  return accumulator + 1
+                }
+                return accumulator
+              }, 0)
+
+              this.nrVisibleChannels = nrVisCh;
+
+              // Update label Div
+              // this.$.labelTemplate.render();
+
+              // Compute the channel views for returned data
+              this._computeChannelViews();
+
+              ctx.save();
+              // let allTimes = 0;
+              for (let ch in this.viewData.channels ) {
+                // eslint-disable-next-line
+                if (this.viewData.channels.hasOwnProperty(ch)) {
+                    // const chTimeStart = new Date().getTime();
+
+                    const curChannelData = this.viewData.channels[ch];
+
+                    // Get channelview for current channel
+                    let curChannelView = null;
+                    curChannelView = this.viewerChannels.find((elem) => {
+                        return elem.id === curChannelData.id
+                    })
+
+                    if(!curChannelView || !curChannelView.visible) {
+                        continue;
+                    }
+
+                    // Render segment placeholders
+                    const startT = this.start;
+                    const rsP = this.rsPeriod;
+                    const xOffset = this.constants['XOFFSET'];
+                    const blurHeight = Math.min( Math.round((this.cHeight/this.viewData.channels.length)- 2), 10);
+                    for (let i = 0; i < curChannelView.dataSegments.length; i+=2) {
+                        if (curChannelView.dataSegments[i + 1] < startT) {
+                            continue
+                        }
+                        if (curChannelView.dataSegments[i] > (startT + this.duration)) {
+                            break;
+                        }
+                        let xPos1 = Math.floor((((xOffset + (curChannelView.dataSegments[i] - startT ) / (rsP)))));
+                        let xPos2 = Math.floor((((xOffset + (curChannelView.dataSegments[i + 1] - startT ) / (rsP)))));
+                        let yPos = Math.floor(curChannelView.rowBaseline - blurHeight/2);
+                        ctxb.fillRect(xPos1, yPos, xPos2-xPos1, blurHeight);
+                    }
+
+                    // Get canvas points for current channel
+                    this.getPointCoords(curChannelView, curChannelData, isRedraw);
+
+                    // check Channel-Type
+                    const nrBlocks = curChannelData.blocks.length;
+                    let channelType = 'Continuous';
+                    if (nrBlocks) {
+                        channelType = curChannelData.blocks[0].type;
+                    }
+
+                    // draw channel segments.
+                    if(curChannelView.hover) {
+                        if (curChannelView.selected) {
+                            ctx.strokeStyle = 'rgba(39,96,255,0.70)';
+                            ctx.fillStyle = 'rgba(39,96,255,0.70)';
+                        } else {
+                            ctx.strokeStyle = 'rgba(39,96,255,0.60)';
+                            ctx.fillStyle = 'rgba(39,96,255,0.60)';
+                        }
+
+                    } else if(curChannelView.selected) {
+                        ctx.strokeStyle = 'rgb(39,96,255)';
+                        ctx.fillStyle = 'rgb(39,96,255)';
+                    } else if (channelType === 'Neural') {
+                        ctx.strokeStyle = 'rgb(120,120,120)';
+                    } else {
+                        ctx.strokeStyle = 'black';
+                        ctx.fillStyle = 'black';
+                    }
+
+                    let lastBlockEnd = null;
+                    let doPolFill = true;
+                    let realSamplePeriod = 1000000 * (1/curChannelView.sf);
+
+                    for (let block = 0; block < nrBlocks; block++) {
+
+                        const curBlock = curChannelData.blocks[block];
+
+                        if (curBlock.nrPoints === 0) {
+                            continue;
+                        }
+
+                        const curData = curBlock.cData;
+                        const curDataLength = curBlock.nrPoints;
+                        const xVec = curData[0];
+                        const yVec = curData[1];
+                        const y2Vec = curData[2];
+
+                        let startIndex = curBlock.renderStartIndex;
+                        let endIndex = curBlock.renderEndIndex
+
+                        ctxb.clearRect(Math.floor(xVec[startIndex]), Math.floor(curChannelView.rowBaseline - blurHeight/2), Math.ceil(xVec[endIndex]-xVec[startIndex] + 2), blurHeight+1);
+
+                        // Check if minMax and render data
+                        switch (curBlock.type) {
+                            case 'Continuous':
+                            case 'realtime':
+
+                            if (curBlock.isMinMax) {
+                                /*
+                                Data is served as min/max per timespan. Based on render settings
+                                we render polygon through points, or render vertical lines.
+                                Default is rendering polygon for accuracy.
+                                */
+
+                                if ((curBlock.samplePeriod / realSamplePeriod) < 3) {
+                                    doPolFill = false;
+                                }
+
+                                if (doPolFill) {
+
+                                    ctx.beginPath();
+
+                                    // set cursor to starting point of polygon
+                                    if (block > 0 ) {//&& !this.isStreaming){
+                                        if(xVec[startIndex] < (lastBlockEnd.x + 3)) {
+                                            ctx.moveTo(lastBlockEnd.x, lastBlockEnd.y);
+                                        } else {
+                                            ctx.moveTo(xVec[startIndex], yVec[startIndex]);
+                                        }
+
+                                    } else{
+                                        ctx.moveTo(xVec[startIndex], yVec[startIndex]);
+                                    }
+
+                                    // Draw lines in segment
+                                    for (let i = startIndex; i < (endIndex+1); i++) {
+                                        ctx.lineTo(xVec[i], yVec[i]);
+                                    }
+                                    for (let i2 = (endIndex-1); i2 >= startIndex; i2--) {
+                                        ctx.lineTo(xVec[i2], y2Vec[i2]);
+                                    }
+
+                                    // Draw line to end of last segment
+                                    if (block > 0 ) {//&& !this.isStreaming){
+                                        if(xVec[startIndex] < (lastBlockEnd.x + 3)) {
+                                            ctx.lineTo(lastBlockEnd.x, lastBlockEnd.y2);
+                                        }
+                                    }
+
+                                    ctx.closePath();
+                                    ctx.fill();
+                                } else {
+
+                                    ctx.beginPath();
+                                    for (let i = startIndex; i < (endIndex+1); i++) {
+
+                                        ctx.lineTo(xVec[i], yVec[i]);
+                                        ctx.lineTo(xVec[i], y2Vec[i]);
+                                        ctx.moveTo(xVec[i], yVec[i]);
+                                    }
+                                    ctx.stroke();
+                                }
+
+                            } else {
+                                if(block===0) {
+                                    ctx.beginPath();
+                                    ctx.moveTo(xVec[startIndex], yVec[startIndex]);
+                                } else if(xVec[startIndex] > (lastBlockEnd.x + 2)) {
+                                    ctx.moveTo(xVec[startIndex], yVec[startIndex]);
+                                }
+                                for (let i = startIndex; i < (endIndex+1); i++) {
+                                    ctx.lineTo(xVec[i], yVec[i]);
+                                }
+                                if (block===(nrBlocks-1)) {
+                                    ctx.stroke();
+                                }
+
+                            }
+                            break;
+                            case 'Neural':
+
+                                /* is neural event data
+                                    render timestamps as vertical lines. We are currently assuming
+                                    single cluster of event --> single color. V2 should include
+                                    coloring based on cluster number.
+                                */
+
+                                // Assume that the data is sorted by cluster
+                                ctx.beginPath();
+                                for (let i = 0; i < curDataLength; i++) {
+                                    ctx.moveTo(xVec[i], yVec[i] );
+                                    ctx.lineTo(xVec[i], y2Vec[i] );
+                                }
+                                ctx.stroke();
+
+
+                        }
+
+                        lastBlockEnd = {
+                            x: xVec[curDataLength -1],
+                            y: yVec[curDataLength -1],
+                            y2: y2Vec[curDataLength -1]
+                        }
+
+                    }
+
+                    // const chTimeEnd = new Date().getTime();
+                    // allTimes = allTimes +(chTimeEnd-chTimeStart);
+                }
+              }
+              ctx.restore();
+              // console.log('render time: ' + allTimes)
+            },
+
+            // Function that is called with the throttledDataRenderer
+            renderDataOnMessage: function() {
+                this.generatePoints();
+                if (this.autoScale === 0) {
+                    this.autoScale--;          // Set to -1 (no autoscale)
+                    this.autoScaleViewData();
+                } else {
+                    this._renderData();
+                }
+
+            },
+            // Method sets the global zoom multiplier based on the viewport data buffer.
+            // This is called once when first page is available
+            autoScaleViewData: function() {
+                console.log('autoscale')
+                let sumMedian = 0;
+                let nrSeg = 0;
+                let allChannels = this.viewData.channels;
+                const allSums = []
+                for (let i=0; i<allChannels.length; i++) {
+
+
+                    let curBlocks = allChannels[i].blocks;
+                    for (let j=0; j<curBlocks.length; j++) {
+                        if(curBlocks[j].type !== 'Continuous') {
+                            continue;
+                        }
+
+                        sumMedian += this.standardDeviation(curBlocks[j].parsedData[1]);
+                        nrSeg++;
+                        allSums.push({channel: i, sumMedian})
+                    }
+                }
+                const percentage = allSums.length * .80;
+                const median = this.calcSumMedian(percentage, allSums);
+                const avgStd = median / nrSeg;
+                if (!isNaN(avgStd)) {
+                    this.$emit('setGlobalZoom', (this.cHeight / allSums.length) / (2 * avgStd))
+                }
+            },
+            /**
+             * Calculate median sum for list of channels
+             * @param {Number} percentage
+             * @param {Array} list
+             * @returns {Number}
+             */
+            calcSumMedian: (percentage, list) => compose(
+              sum,
+              map(prop('sumMedian')),
+              take(percentage),
+              sortBy(prop('sumMedian'))
+            )(list),
+
+            // Helper function for autoscale
+            standardDeviation: function(values) {
+                const avg = this.average(values);
+
+                const squareDiffs = values.map(function(value) {
+                    const diff = value - avg;
+                    const sqrDiff = diff * diff;
+                    return sqrDiff;
+                });
+
+                const avgSquareDiff = this.average(squareDiffs);
+
+                const stdDev = Math.sqrt(avgSquareDiff);
+                return stdDev;
+            },
+            // Helper function for autoscale
+            average: function(data) {
+                const sum = data.reduce(function(sum, value) {
+                    return sum + value;
+                }, 0);
+
+                const avg = sum / data.length;
+                return avg;
+            },
+            // Get all pages that are partially returned and re-request
+            reRequestPages: function() {
+
+                const requestPages = [];
+                this.requestedPages.forEach(function(value, key) {
+                // Only rerequest pages where we already have partial return
+                    if (!isNaN(value.subPageCount)) {
+
+                        // only include channels with partial return
+                        const channels = [];
+                        value.counter.forEach(function(count, chId) {
+                            if (!isNaN(count) && count > 0) {
+                                channels.push(chId)
+                            }
+                        })
+
+                        if (channels.length > 0) {
+                            requestPages.push({
+                                channels: channels,
+                                start: key,
+                                duration: this.pageSize,
+                                isInViewport: true,
+                                pixelWidth: this.rsPeriod
+                            });
+                        }
+                    }
+                }, this);
+
+                // clear requestedPages
+                this.requestedPages.clear();
+
+                this.catchUpRequestPages = requestPages;
+            },
+
+
+            // _________________
+            // WEBSOCKET METHODS
+            openWebsocket: function() {
+                //if the websocket is opening or already open, don't open a new one
+                if (this._websocket && (this._websocket.readyState === 0 || this._websocket.readyState === 1) ) {
+                  return;
+                }
+
+                let url = this.timeSeriesUrl
+                this._websocket = new WebSocket(url);
+                this._websocket.onopen = this._onWebsocketOpen.bind(this);
+                this._websocket.onclose = this._onWebsocketClose.bind(this);
+                this._websocket.onmessage = this._onWebsocketMessage.bind(this);
+
+            },
+            sendMontageMessage: function (value) {
+                if (this._websocket && this._websocket.readyState === 1) {
+                    const payload = { montage: value, packageId: this.packageId }
+                    this._websocket.send(JSON.stringify(payload))
+                } else {
+                    this.async(() => {this.sendMontageMessage(value)}, 500)
+                }
+            },
+            _onWebsocketClose: function() {
+                console.log('Websocket closed function')
+                clearTimeout(this.preFetchTime);
+                this.aSyncPreRequests = [];
+                this.openWebsocket();
+            },
+            _onWebsocketFinalClose: function() {
+                console.log('Websocket closed forever');
+            },
+            _onWebsocketOpen: function() {
+                console.log('Websocket is opened')
+                if (this.initWebsocket) {
+                    let chIds = [];
+                    for (let i=0; i<this.viewerChannels.length; i++) {
+                        chIds.push(this.viewerChannels[i].id)
+                    }
+                    let message = {'channelFiltersToClear':chIds};
+                    // clear filters
+                    this.sendFilterMessage(message);
+                    // clear montage
+                    const payload = { montage: 'NOT_MONTAGED', packageId: this.packageId }
+                    this._websocket.send(JSON.stringify(payload))
+                    this.initWebsocket = false;
+                }
+
+                if (this.catchUpRequestPages && this.catchUpRequestPages.length > 0) {
+                    this.requestDataFromServer(this.catchUpRequestPages);
+                }
+                this.catchUpRequestPages = [];
+
+                if(this.isStreaming) {
+                    this.initStream();
+                }
+
+                this.generatePoints();
+            },
+            _onWebsocketMessage: function(msg) {
+              // process json messages
+              if (typeof msg.data === 'string') {
+                let data = {}
+
+                try {
+                  data = JSON.parse(msg.data)
+                } catch (e) {
+                  this.$store.dispatch('setViewerErrors', { error: 'JSON Parse Error' })
+                }
+
+                if (data.channelDetails) {
+                  // const baseChannels = this.activeViewer.channels
+                  const virtualChannels = data.channelDetails.map(({ id, name, unit, channelType, end, start, rate }) => {
+                    // const baseChannel = baseChannels.find(ch => (ch.content.id === id))
+                    const content = {
+                      id,
+                      name,
+                      channelType: channelType,
+                      label: name,
+                      unit: unit,
+                      rate: rate,
+                      start: start,
+                      end: end,
+                      virtualId: `${id}_${name}`
+                    }
+                    // ensure that channel ids are unique for montages
+                    if (this.viewerMontageScheme !== 'NOT_MONTAGED') {
+                      content.id = `${id}_${name}`
+                    }
+                    return { content, properties: [] }
+                  })
+
+                  this.initChannels(virtualChannels)
+                    .then(() => {
+                        this.invalidate()
+                        this.renderAll()
+                    })
+                } else if (data.error) {
+                  this.$store.dispatch('setViewerErrors', data)
+                }
+
+                // short circuit
+                return
+              }
+
+              // process protobuf messages
+              const myReader = new FileReader();
+              myReader.parent = this;
+              myReader.addEventListener('loadend', function(e) {
+                  const buffer = e.srcElement ? e.srcElement.result : e.target.result; //arraybuffer object
+                  const barray = new Uint8Array(buffer)
+
+                  const timeSeriesMessage = this.parent.timeSeriesMessage.decode(barray);
+                  const segment = timeSeriesMessage.segment;
+
+                  // Handle Neural Data
+                  if (timeSeriesMessage.event && timeSeriesMessage.event.length>0 && timeSeriesMessage.event[0].pageStart) {
+
+                      const tsEvent = timeSeriesMessage.event[0];
+                      const dataPoints = [[], []];
+                      const nrVal = tsEvent.times.length/2;
+
+                      let curI = 0;
+                      for (let i = 0; i < nrVal; i++) {
+                          dataPoints[0].push( tsEvent.times[curI]);
+                          dataPoints[1].push( tsEvent.times[curI + 1]);
+                          curI += 2;
+                      }
+
+                      let cData = new Array(3);
+                      let k=0;
+                      while (k < 3) {
+                          cData[k] = new Float32Array(dataPoints[0].length);
+                          k++;
+                      }
+
+                      const segm = {
+                          chId: tsEvent.source,
+                          lastUsed: 0,
+                          unit: 'uV',
+                          samplePeriod: tsEvent.samplePeriod,
+                          pageStart: tsEvent.pageStart,
+                          pageEnd: tsEvent.pageEnd,
+                          startTs: tsEvent.pageStart,
+                          isMinMax: tsEvent.isResampled,
+                          unitM: 1,
+                          type: 'Neural',
+                          nrPoints: nrVal,
+                          parsedData: dataPoints,
+                          cData: cData
+                      };
+
+                      this.parent.dataCallback({
+                          pageStart: tsEvent.pageStart,
+                          data: segm,
+                          type: 'Neural',
+                          nrResponses: timeSeriesMessage.totalResponses
+                      });
+                  }
+
+                  // Handle Regular Timeseries data package.
+                  if (segment !== null) {
+                      // Check if viewer is still interested in the arriving data
+                      if (segment.requestedSamplePeriod !== Math.ceil(this.parent.rsPeriod)) {
+                          return
+                      }
+
+                      // create array from points of data.
+                      let nrVal = null;
+                      if (segment.isMinMax) {
+                          // Create min/max vectors
+                          nrVal = segment.data.length/2;
+                      } else {
+                          //its just one big list of values
+                          nrVal = segment.data.length;
+                      }
+
+                      const parsedData = new Array(3);
+                      const startTs = segment.startTs
+
+                      let sumElem = 0;
+                      let nrValidPoints = 0;
+                      let i = 0;
+                      while (i < 3) {
+                          parsedData[i] = new Float64Array(nrVal);
+                          i++;
+                      }
+
+                      if (segment.isMinMax) {
+                        // Create min/max vectors
+                        let curI = 0;
+                        for (let i = 0; i < nrVal; i++) {
+                          let curY = -segment.data[curI];
+                          let curY2 = -segment.data[curI + 1];
+                          parsedData[0][i] = startTs + (i * segment.samplePeriod);
+                          parsedData[1][i] = curY;
+                          parsedData[2][i] = curY2;
+                          if (!isNaN(curY)) {
+                              nrValidPoints++;
+                              sumElem += curY + (curY2 - curY)/2;
+                          }
+                          curI += 2;
+
+                        }
+
+                      } else {
+                        //its just one big list of values
+                          for (let i = 0; i < nrVal; i++) {
+                              let curY = -segment.data[i];
+                              parsedData[0][i] = startTs + (i * segment.samplePeriod);
+                              parsedData[1][i] = curY;
+                              if (!isNaN(curY)) {
+                                  nrValidPoints++;
+                                  sumElem += curY;
+                              }
+                          }
+                      }
+
+                      let elemMedian = 0;
+                      if (this.parent.constants['USEMEDIAN']) {
+                          const sortedYvals = Array.prototype.slice.call(parsedData[1]).sort();
+                          if (segment.isMinMax) {
+                              elemMedian = sortedYvals[Math.round(sortedYvals.length/2)];
+                          } else {
+                              elemMedian = sortedYvals[Math.round(sortedYvals.length)];
+                          }
+                      }
+
+                      let cData = new Array(3);
+                      let k=0;
+                      while (k < 3) {
+                          cData[k] = new Float32Array(parsedData[0].length);
+                          k++;
+                      }
+
+                      const segm = {
+                          chId: segment.source,
+                          lastUsed: segment.lastUsed,
+                          unit:segment.unit,
+                          samplePeriod: segment.samplePeriod,
+                          pageStart: segment.pageStart,
+                          pageEnd: segment.pageEnd,
+                          startTs: startTs,
+                          isMinMax: segment.isMinMax,
+                          unitM: segment.unitM,
+                          type: segment.segmentType,
+                          nrPoints: nrVal,
+                          cData: cData,
+                          parsedData: parsedData,
+                          median: elemMedian,
+                          sumElem: sumElem,
+                          nrValidPoints: nrValidPoints,
+                          name: segment.channelName,
+                          label: segment.channelName,
+                          virtualId: `${segment.source}_${segment.channelName}`
+                      };
+
+                      if(segm.nrPoints>0) {
+
+                          this.parent.dataCallback({
+                              pageStart: segment.pageStart,
+                              data: segm,
+                              type: segment.segmentType,
+                              nrResponses: timeSeriesMessage.totalResponses
+                          });
+                      } else {
+                          // Check if already in Gap Array
+                          this.parent.dataCallback({
+                              pageStart: segment.pageStart,
+                              data: segm,
+                              nrResponses: timeSeriesMessage.totalResponses,
+                              type: 'gap'
+                          });
+
+                      }
+                  }
+              });
+
+              myReader.readAsArrayBuffer(msg.data);
+            },
+            sendFilterMessage: function(msg) {
+              if (this._websocket && this._websocket.readyState === 1) {
+                const parms = msg.filterParameters || [];
+                parms.forEach( p => {
+                    if (!this.isTruthy(p)) {
+                        return;
+                    }
+                });
+                this._websocket.send(JSON.stringify(msg));
+              } else {
+                this.async(() => {this.sendFilterMessage(msg)}, 200);
+              }
+            },
+            isTruthy: val => val && val !== '' && !val.isNaN,
+            calcFilterType: function(low, high, notch) {
+              switch(true) {
+                case !this.isTruthy(low) && !this.isTruthy(high) && !notch:
+                  return 'clear';
+                case this.isTruthy(low) && this.isTruthy(high):
+                  return 'bandpass';
+                case this.isTruthy(low):
+                  return 'highpass';
+                case this.isTruthy(high):
+                  return 'lowpass';
+                default:
+                  return 'bandstop';
+              }
+            },
+            // Callback method for async data fetch from server
+            dataCallback: function(obj) {
+
+                // Autoscale counter is set to number > 0 for first request, and autoscale is triggered when
+                // counter reaches 0.
+                if (this.autoScale > 0) {
+                    this.autoScale--;
+                }
+
+                // Find channel for object in chData
+                let curChData = null;
+                for (let ch = 0; ch < this.chData.length; ch++) {
+                    if (this.chData[ch].label === obj.data.label) {
+                        curChData = this.chData[ch];
+                        break;
+                    }
+                }
+
+                // Based on Obj type, handle placement in cache differently
+                switch(obj.type) {
+
+                    case 'gap':
+                    case 'Neural':  //neural and continuous data get put in the cache the same way
+                    case 'Continuous':
+
+                    // Check if data already exists in chData (happens when zoom out, and back in before data is there)
+                    // eslint-disable-next-line
+                    let addData = false;
+                    // eslint-disable-next-line
+                    let curSegments = curChData && curChData.segments;
+                    if (curSegments && obj.type !== 'gap') {
+                        addData = true;
+                        if (curSegments.length > 0) {
+                            let fIndex = this.segmIndexOf(curSegments, obj.data.startTs, true, 0);
+
+                            // Iterate over all segments in CHData with same pageStart to see if page is already present
+                            while( curSegments[fIndex] && curSegments[fIndex].pageStart === obj.data.pageStart) {
+                                if (curSegments[fIndex].startTs === obj.data.startTs) {
+                                    addData = false;
+                                    break;
+                                }
+                                fIndex++;
+                            }
+                        }
+                    }
+
+                    // Remove returned page from the list of requested Pages.
+                    // eslint-disable-next-line
+                    let requestedPage = this.requestedPages.get(obj.data.pageStart);
+                    // array or page IDs (timestamp, based on viewport)
+                        // array of channel IDs
+                    if (requestedPage) {
+
+                        // Update time
+                        requestedPage.ts = Date.now();
+
+                        let countForChannel = requestedPage.counter.get(obj.data.chId);
+                        if (isNaN(countForChannel)) {
+                            countForChannel = obj.nrResponses -1;
+                            requestedPage.counter.set(obj.data.chId, countForChannel);
+                            requestedPage.subPageCount = countForChannel;
+                        } else {
+                            countForChannel = countForChannel - 1;
+                            requestedPage.counter.set(obj.data.chId, countForChannel);
+                        }
+
+                        if (countForChannel <= 0) {
+                            let isComplete = true;
+                            for (let value2 of requestedPage.counter.values()) {
+                                if (value2 > 0 || isNaN(value2)) {
+                                    isComplete = false;
+                                    break;
+                                }
+                            }
+                            if (isComplete) {
+                                this.requestedPages.delete(obj.data.pageStart);
+                                // console.log('isComplete')
+                            }
+
+                        }
+
+                    }
+
+                    // Add data to local cache
+                    if (addData) {
+                        curSegments.push(obj.data);
+
+                        // Resort segments in each channel afer adding data
+                        curSegments.sort(function Comparator(a, b) {
+                            if (a.startTs < b.startTs) return -1;
+                            if (a.startTs > b.startTs) return 1;
+                            return 0;
+                        });
+
+                        // Check if returned page falls in viewport
+                        if (obj.pageStart < (this.start + this.duration)) {
+                            this.throttledGetRenderData();
+                        }
+                    }
+
+                    break;
+
+                case 'realtime':
+                    console.log('No Longer Supporting RealTime Data')
+                    break;
+                }
+
+            }
+
+        }
+    }
+
+</script>
+
+<style lang="scss" scoped>
+    .canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        margin-left: 5px;
+        cursor: ew-resize;
+        outline: none;
+    }
+</style>