From c256696790ed6a254337f98d6caca3bec45666c6 Mon Sep 17 00:00:00 2001 From: Jamie V Date: Tue, 2 Jun 2020 12:27:55 -0700 Subject: [PATCH] Image view should react to time conductor changes - 2712 (#2934) Image view reacts to time conductor changes Fixes #2712 Co-authored-by: Andrew Henry --- example/imagery/plugin.js | 11 +- .../imagery/components/ImageryViewLayout.vue | 106 +++++++++++------- 2 files changed, 75 insertions(+), 42 deletions(-) diff --git a/example/imagery/plugin.js b/example/imagery/plugin.js index 8d3d4211ed..63a351c985 100644 --- a/example/imagery/plugin.js +++ b/example/imagery/plugin.js @@ -52,6 +52,7 @@ define([ return { name: name, utc: Math.floor(timestamp / 5000) * 5000, + local: Math.floor(timestamp / 5000) * 5000, url: IMAGE_SAMPLES[Math.floor(timestamp / 5000) % IMAGE_SAMPLES.length] }; } @@ -78,7 +79,7 @@ define([ }, request: function (domainObject, options) { var start = options.start; - var end = options.end; + var end = Math.min(options.end, Date.now()); var data = []; while (start <= end && data.length < 5000) { data.push(pointForTimestamp(start, domainObject.name)); @@ -118,6 +119,14 @@ define([ name: 'Time', key: 'utc', format: 'utc', + hints: { + domain: 2 + } + }, + { + name: 'Local Time', + key: 'local', + format: 'local-format', hints: { domain: 1 } diff --git a/src/plugins/imagery/components/ImageryViewLayout.vue b/src/plugins/imagery/components/ImageryViewLayout.vue index 0821eeabd9..1975bd0803 100644 --- a/src/plugins/imagery/components/ImageryViewLayout.vue +++ b/src/plugins/imagery/components/ImageryViewLayout.vue @@ -66,7 +66,6 @@ export default { data() { return { autoScroll: true, - date: '', filters : { brightness: 100, contrast: 100 @@ -78,22 +77,39 @@ export default { imageHistory: [], imageUrl: '', isPaused: false, + metadata: {}, requestCount: 0, timeFormat: '' } }, mounted() { + // set this.keystring = this.openmct.objects.makeKeyString(this.domainObject.identifier); - this.subscribe(this.domainObject); + this.metadata = this.openmct.telemetry.getMetadata(this.domainObject); + this.imageFormat = this.openmct.telemetry.getValueFormatter(this.metadata.valuesForHints(['image'])[0]); + // initialize + this.timeKey = this.openmct.time.timeSystem().key; + this.timeFormat = this.openmct.telemetry.getValueFormatter(this.metadata.value(this.timeKey)); + // listen + this.openmct.time.on('bounds', this.boundsChange); + this.openmct.time.on('timeSystem', this.timeSystemChange); + // kickoff + this.subscribe(); + this.requestHistory(); }, updated() { this.scrollToRight(); }, beforeDestroy() { - this.stopListening(); + if (this.unsubscribe) { + this.unsubscribe(); + delete this.unsubscribe; + } + this.openmct.time.off('bounds', this.boundsChange); + this.openmct.time.off('timeSystem', this.timeSystemChange); }, methods: { - datumMatchesMostRecent(datum) { + datumIsNotValid(datum) { if (this.imageHistory.length === 0) { return false; } @@ -103,7 +119,14 @@ export default { const lastHistoryTime = this.timeFormat.format(this.imageHistory.slice(-1)[0]); const lastHistoryURL = this.imageFormat.format(this.imageHistory.slice(-1)[0]); - return (datumTime === lastHistoryTime) && (datumURL === lastHistoryURL); + // datum is not valid if it matches the last datum in history, + // or it is before the last datum in the history + const datumTimeCheck = this.timeFormat.parse(datum); + const historyTimeCheck = this.timeFormat.parse(this.imageHistory.slice(-1)[0]); + const matchesLast = (datumTime === lastHistoryTime) && (datumURL === lastHistoryURL); + const isStale = datumTimeCheck < historyTimeCheck; + + return matchesLast || isStale; }, getImageUrl(datum) { return datum ? @@ -147,21 +170,6 @@ export default { return this.isPaused; }, - requestHistory(bounds) { - this.requestCount++; - this.imageHistory = []; - const requestId = this.requestCount; - this.openmct.telemetry - .request(this.domainObject, bounds) - .then((values = []) => { - if (this.requestCount > requestId) { - return Promise.resolve('Stale request'); - } - - values.forEach(this.updateHistory); - this.updateValues(values[values.length - 1]); - }); - }, scrollToRight() { if (this.isPaused || !this.$refs.thumbsWrapper || !this.autoScroll) { return; @@ -188,40 +196,56 @@ export default { image.selected = true; } }, - stopListening() { - if (this.unsubscribe) { - this.unsubscribe(); - delete this.unsubscribe; + boundsChange(bounds, isTick) { + if(!isTick) { + this.requestHistory(); } }, - subscribe(domainObject) { - this.date = '' - this.imageUrl = ''; - this.openmct.objects.get(this.keystring) - .then((object) => { - const metadata = this.openmct.telemetry.getMetadata(this.domainObject); - this.timeKey = this.openmct.time.timeSystem().key; - this.timeFormat = this.openmct.telemetry.getValueFormatter(metadata.value(this.timeKey)); - this.imageFormat = this.openmct.telemetry.getValueFormatter(metadata.valuesForHints(['image'])[0]); - this.unsubscribe = this.openmct.telemetry - .subscribe(this.domainObject, (datum) => { - this.updateHistory(datum); - this.updateValues(datum); - }); + requestHistory() { + let bounds = this.openmct.time.bounds(); + this.requestCount++; + const requestId = this.requestCount; + this.imageHistory = []; + this.openmct.telemetry + .request(this.domainObject, bounds) + .then((values = []) => { + if (this.requestCount === requestId) { + values.forEach(this.updateHistory, false); + this.updateValues(values[values.length - 1]); + } + }); + }, + timeSystemChange(system) { + // reset timesystem dependent variables + this.timeKey = system.key; + this.timeFormat = this.openmct.telemetry.getValueFormatter(this.metadata.value(this.timeKey)); + }, + subscribe() { + this.unsubscribe = this.openmct.telemetry + .subscribe(this.domainObject, (datum) => { + let parsedTimestamp = this.timeFormat.parse(datum[this.timeKey]), + bounds = this.openmct.time.bounds(); - this.requestHistory(this.openmct.time.bounds()); + if(parsedTimestamp >= bounds.start && parsedTimestamp <= bounds.end) { + this.updateHistory(datum); + this.updateValues(datum); + } }); }, unselectAllImages() { this.imageHistory.forEach(image => image.selected = false); }, - updateHistory(datum) { - if (this.datumMatchesMostRecent(datum)) { + updateHistory(datum, updateValues = true) { + if (this.datumIsNotValid(datum)) { return; } const index = _.sortedIndexBy(this.imageHistory, datum, this.timeFormat.format.bind(this.timeFormat)); this.imageHistory.splice(index, 0, datum); + + if(updateValues) { + this.updateValues(datum); + } }, updateValues(datum) { if (this.isPaused) {