Merge branch 'master' into f#2594

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -1,90 +1,68 @@
 <template>
-<multipane class="c-imagery-layout"
+<div class="c-imagery">
-           type="vertical"
+    <div class="c-imagery__main-image-wrapper has-local-controls">
->
+        <div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover l-flex-row c-imagery__lc">
-    <pane :style="{'min-height': `300px`}">
+            <span class="holder flex-elem grows c-imagery__lc__sliders">
-        <div class="main-image-wrapper c-imagery has-local-controls">
+                <input v-model="filters.brightness"
-            <div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover l-flex-row c-imagery__lc">
+                       class="icon-brightness"
-                <span class="holder flex-elem grows c-imagery__lc__sliders">
+                       type="range"
-                    <input v-model="filters.brightness"
+                       min="0"
-                           class="icon-brightness"
+                       max="500"
-                           type="range"
-                           min="0"
-                           max="500"
-                    >
-                    <input v-model="filters.contrast"
-                           class="icon-contrast"
-                           type="range"
-                           min="0"
-                           max="500"
-                    >
-                </span>
-                <span class="holder flex-elem t-reset-btn-holder c-imagery__lc__reset-btn">
-                    <a class="s-icon-button icon-reset t-btn-reset"
-                       @click="filters={brightness: 100, contrast: 100}"
-                    ></a>
-                </span>
-            </div>
-
-            <div class="main-image s-image-main"
-                 :class="{'paused unnsynced': paused(),'stale':false }"
-                 :style="{'background-image': `url(${getImageUrl()})`,
-                          'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`}"
-            >
-            </div>
-
-            <div class="l-image-controller flex-elem l-flex-row">
-                <div class="l-datetime-w flex-elem grows">
-                    <a class="c-button show-thumbs sm hidden icon-thumbs-strip"></a>
-                    <span class="l-time">{{ getTime() }}</span>
-                </div>
-                <div class="h-local-controls flex-elem">
-                    <a class="c-button icon-pause pause-play"
-                       :class="{'is-paused': paused()}"
-                       @click="paused(!paused())"
-                    ></a>
-                </div>
-            </div>
-        </div>
-    </pane>
-
-    <pane class="c-inspector__elements"
-          handle="before"
-          :style="{'min-height': `100px`}"
-    >
-        <div class="c-elements-pool">
-            <div ref="thumbsWrapper"
-                 class="thumbs-layout"
-                 @scroll="handleScroll"
-            >
-                <div v-for="(imageData, index) in imageHistory"
-                     :key="index"
-                     class="l-image-thumb-item"
-                     :class="{selected: imageData.selected}"
-                     @click="setSelectedImage(imageData)"
                 >
-                    <img class="l-thumb"
+                <input v-model="filters.contrast"
-                         :src="getImageUrl(imageData)"
+                       class="icon-contrast"
-                    >
+                       type="range"
-                    <div class="l-time">{{ getTime(imageData) }}</div>
+                       min="0"
-                </div>
+                       max="500"
+                >
+            </span>
+            <span class="holder flex-elem t-reset-btn-holder c-imagery__lc__reset-btn">
+                <a class="s-icon-button icon-reset t-btn-reset"
+                   @click="filters={brightness: 100, contrast: 100}"
+                ></a>
+            </span>
+        </div>
+        <div class="main-image s-image-main c-imagery__main-image"
+             :class="{'paused unnsynced': paused(),'stale':false }"
+             :style="{'background-image': `url(${getImageUrl()})`,
+                      'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`}"
+        >
+        </div>
+        <div class="c-imagery__control-bar">
+            <div class="c-imagery__timestamp">{{ getTime() }}</div>
+            <div class="h-local-controls flex-elem">
+                <a class="c-button icon-pause pause-play"
+                   :class="{'is-paused': paused()}"
+                   @click="paused(!paused())"
+                ></a>
             </div>
         </div>
-    </pane>
+    </div>
-</multipane>
+    <div ref="thumbsWrapper"
+         class="c-imagery__thumbs-wrapper"
+         :class="{'is-paused': paused()}"
+         @scroll="handleScroll"
+    >
+        <div v-for="(imageData, index) in imageHistory"
+             :key="index"
+             class="c-imagery__thumb c-thumb"
+             :class="{selected: imageData.selected}"
+             @click="setSelectedImage(imageData)"
+        >
+            <img class="c-thumb__image"
+                 :src="getImageUrl(imageData)"
+            >
+            <div class="c-thumb__timestamp">{{ getTime(imageData) }}</div>
+        </div>
+    </div>
+</div>
 </template>
 
 <script>
-import multipane from '@/ui/layout/multipane.vue';
-import pane from '@/ui/layout/pane.vue';
 import _ from 'lodash';
 
 export default {
     inject: ['openmct', 'domainObject'],
-    components: {
-        multipane,
-        pane
-    },
     data() {
         return {
             autoScroll: true,
@@ -109,7 +87,7 @@ export default {
         this.subscribe(this.domainObject);
     },
     updated() {
-        this.scrollToBottom();
+        this.scrollToRight();
     },
     beforeDestroy() {
         this.stopListening();
@@ -152,6 +130,10 @@ export default {
             if (arguments.length > 0 && state !== this.isPaused) {
                 this.unselectAllImages();
                 this.isPaused = state;
+                if (state === true) {
+                    // If we are pausing, select the latest image in imageHistory
+                    this.setSelectedImage(this.imageHistory[this.imageHistory.length - 1]);
+                }
 
                 if (this.nextDatum) {
                     this.updateValues(this.nextDatum);
@@ -180,24 +162,31 @@ export default {
                     this.updateValues(values[values.length - 1]);
                 });
         },
-        scrollToBottom() {
+        scrollToRight() {
             if (this.isPaused || !this.$refs.thumbsWrapper || !this.autoScroll) {
                 return;
             }
 
-            const scrollHeight = this.$refs.thumbsWrapper.scrollHeight || 0;
+            const scrollWidth = this.$refs.thumbsWrapper.scrollWidth || 0;
-            if (!scrollHeight) {
+            if (!scrollWidth) {
                 return;
             }
 
-            setTimeout(() => this.$refs.thumbsWrapper.scrollTop = scrollHeight, 0);
+            setTimeout(() => this.$refs.thumbsWrapper.scrollLeft = scrollWidth, 0);
         },
         setSelectedImage(image) {
-            this.imageUrl = this.getImageUrl(image);
+            // If we are paused and the current image IS selected, unpause
-            this.time = this.getTime(image);
+            // Otherwise, set current image and pause
-            this.paused(true);
+            if (this.isPaused && image.selected) {
-            this.unselectAllImages();
+                this.paused(false);
-            image.selected = true;
+                this.unselectAllImages();
+            } else {
+                this.imageUrl = this.getImageUrl(image);
+                this.time = this.getTime(image);
+                this.paused(true);
+                this.unselectAllImages();
+                image.selected = true;
+            }
         },
         stopListening() {
             if (this.unsubscribe) {

src/plugins/imagery/components/imagery-view-layout.scss

@@ -1,16 +1,20 @@
-.c-imagery-layout {
+.c-imagery {
     display: flex;
     flex-direction: column;
-    overflow: auto;
+    overflow: hidden;
+    height: 100%;
 
-    .main-image-wrapper {
+    > * + * {
-        display: flex;
+        margin-top: $interiorMargin;
-        flex-direction: column;
-        height: 100%;
-        padding-bottom: 5px;
     }
 
-    .main-image {
+    &__main-image-wrapper {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+    }
+
+    &__main-image {
         background-position: center;
         background-repeat: no-repeat;
         background-size: contain;
@@ -21,12 +25,137 @@
         }
     }
 
-    .l-image-controller {
+    &__control-bar {
         padding: 5px 0 0 0;
+        display: flex;
+        align-items: center;
     }
 
-    .thumbs-layout {
+    &__timestamp {
-        margin-top: 5px;
+        flex: 1 1 auto;
-        overflow: auto;
+    }
+
+    &__thumbs-wrapper {
+        flex: 0 0 auto;
+        display: flex;
+        flex-direction: row;
+        height: 135px;
+        overflow-x: auto;
+        overflow-y: hidden;
+
+        &.is-paused {
+            background: rgba($colorPausedBg, 0.4);
+        }
+
+        .c-thumb:last-child {
+            // Hilite the lastest thumb
+            background: $colorBodyFg;
+            color: $colorBodyBg;
+        }
+    }
+}
+
+/*************************************** THUMBS */
+.c-thumb {
+    display: flex;
+    flex-direction: column;
+    padding: 4px;
+    width: $imageThumbsD;
+
+    &:hover {
+        background: $colorThumbHoverBg;
+    }
+
+    &.selected {
+        background: $colorPausedBg !important;
+        color: $colorPausedFg !important;
+    }
+
+    &__image {
+        background-color: rgba($colorBodyFg, 0.2);
+        width: 100%;
+    }
+
+    &__timestamp {
+        flex: 0 0 auto;
+        padding: 2px 3px;
+    }
+}
+
+.l-layout,
+.c-fl {
+    .c-imagery__thumbs-wrapper {
+        //  When Imagery is in a layout, hide the thumbs area
+        display: none;
+    }
+}
+
+.s-image-main {
+    background-color: $colorPlotBg;
+    border: 1px solid transparent;
+}
+
+/*************************************** IMAGERY LOCAL CONTROLS*/
+.c-imagery {
+    .h-local-controls--overlay-content {
+        position: absolute;
+        right: $interiorMargin; top: $interiorMargin;
+        z-index: 2;
+        background: $colorLocalControlOvrBg;
+        border-radius: $basicCr;
+        max-width: 200px;
+        min-width: 100px;
+        width: 35%;
+        align-items: center;
+        padding: $interiorMargin $interiorMarginLg;
+
+        input[type="range"] {
+            display: block;
+            width: 100%;
+            &:not(:first-child) {
+                margin-top: $interiorMarginLg;
+            }
+
+            &:before {
+                margin-right: $interiorMarginSm;
+            }
+        }
+    }
+
+    &__lc {
+        &__reset-btn {
+            $bc: $scrollbarTrackColorBg;
+            &:before,
+            &:after {
+                border-right: 1px solid $bc;
+                content:'';
+                display: block;
+                width: 5px;
+                height: 4px;
+            }
+
+            &:before {
+                border-top: 1px solid $bc;
+                margin-bottom: 2px;
+            }
+
+            &:after {
+                border-bottom: 1px solid $bc;
+                margin-top: 2px;
+            }
+        }
+    }
+}
+
+/*************************************** BUTTONS */
+.c-button.pause-play {
+    // Pause icon set by default in markup
+    &.is-paused {
+        background: $colorPausedBg !important;
+        color: $colorPausedFg;
+
+        &:before {
+            content: $glyph-icon-play;
+        }
     }
 }

src/plugins/plot/src/configuration/PlotSeries.js

@@ -377,7 +377,7 @@ define([
          * @public
          */
         updateFiltersAndRefresh: function (updatedFilters) {
-            if (this.filters) {
+            if (this.filters && !_.isEqual(this.filters, updatedFilters)) {
                 this.filters = updatedFilters;
                 this.reset();
                 if (this.unsubscribe) {

src/plugins/telemetryTable/TelemetryTable.js

@@ -47,6 +47,7 @@ define([
             this.subscriptions = {};
             this.tableComposition = undefined;
             this.telemetryObjects = [];
+            this.datumCache = [];
             this.outstandingRequests = 0;
             this.configuration = new TelemetryTableConfiguration(domainObject, openmct);
             this.paused = false;
@@ -155,6 +156,7 @@ define([
         processHistoricalData(telemetryData, columnMap, keyString, limitEvaluator) {
             let telemetryRows = telemetryData.map(datum => new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
             this.boundedRows.add(telemetryRows);
+            this.emit('historical-rows-processed');
         }
 
         /**
@@ -227,12 +229,28 @@ define([
                     return;
                 }
 
-                if (!this.paused) {
+                if (this.paused) {
+                    let realtimeDatum = {
+                        datum,
+                        columnMap,
+                        keyString,
+                        limitEvaluator
+                    };
+
+                    this.datumCache.push(realtimeDatum);
+                } else {
                     this.processRealtimeDatum(datum, columnMap, keyString, limitEvaluator);
                 }
             }, subscribeOptions);
         }
 
+        processDatumCache() {
+            this.datumCache.forEach(cachedDatum => {
+                this.processRealtimeDatum(cachedDatum.datum, cachedDatum.columnMap, cachedDatum.keyString, cachedDatum.limitEvaluator);
+            });
+            this.datumCache = [];
+        }
+
         processRealtimeDatum(datum, columnMap, keyString, limitEvaluator) {
             this.boundedRows.add(new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
         }
@@ -272,8 +290,8 @@ define([
 
         unpause() {
             this.paused = false;
+            this.processDatumCache();
             this.boundedRows.subscribeToBounds();
-            this.refreshData();
         }
 
         destroy() {

src/plugins/telemetryTable/TelemetryTableViewProvider.js

@@ -68,7 +68,7 @@ define([
                                 table,
                                 objectPath
                             },
-                            template: '<table-component :isEditing="isEditing" :enableMarking="true"></table-component>'
+                            template: '<table-component :isEditing="isEditing" :marking="{enable: true}"/>'
                         });
                     },
                     onEditModeChange(editMode) {
@@ -86,7 +86,7 @@ define([
             priority() {
                 return 1;
             }
-        }
+        };
     }
     return TelemetryTableViewProvider;
 });

src/plugins/telemetryTable/components/table.vue

@@ -21,7 +21,10 @@
  *****************************************************************************/
 <template>
 <div class="c-table-wrapper">
-    <div class="c-table-control-bar c-control-bar">
+    <!-- main contolbar  start-->
+    <div v-if="!marking.useAlternateControlBar"
+         class="c-table-control-bar c-control-bar"
+    >
         <button
             v-if="allowExport"
             class="c-button icon-download labeled"
@@ -48,11 +51,11 @@
             <span class="c-button__label">Unmark All Rows</span>
         </button>
         <div
-            v-if="enableMarking"
+            v-if="marking.enable"
             class="c-separator"
         ></div>
         <button
-            v-if="enableMarking"
+            v-if="marking.enable"
             class="c-button icon-pause pause-play labeled"
             :class=" paused ? 'icon-play is-paused' : 'icon-pause'"
             :title="paused ? 'Continue Data Flow' : 'Pause Data Flow'"
@@ -62,8 +65,37 @@
                 {{ paused ? 'Play' : 'Pause' }}
             </span>
         </button>
+
         <slot name="buttons"></slot>
     </div>
+    <!-- main controlbar end -->
+
+    <!-- alternate controlbar start -->
+    <div v-if="marking.useAlternateControlBar && markedRows.length"
+         class="c-table-control-bar c-control-bar"
+    >
+        <div class="c-control-bar__label">
+            {{ markedRows.length > 1 ? `${markedRows.length} ${marking.rowNamePlural} selected`: `${markedRows.length} ${marking.rowName} selected` }}
+        </div>
+
+        <toggle-switch
+            id="show-filtered-rows-toggle"
+            label="Show selected items only"
+            :checked="isShowingMarkedRowsOnly"
+            @change="toggleMarkedRows"
+        />
+
+        <button
+            class="c-button icon-x labeled"
+            title="Deselect All"
+            @click="unmarkAllRows()"
+        >
+            <span class="c-button__label">Deselect All</span>
+        </button>
+
+        <slot name="buttons"></slot>
+    </div>
+    <!-- alternate controlbar end  -->
 
     <div
         class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
@@ -205,6 +237,7 @@ import TableColumnHeader from './table-column-header.vue';
 import TelemetryFilterIndicator from './TelemetryFilterIndicator.vue';
 import CSVExporter from '../../../exporters/CSVExporter.js';
 import _ from 'lodash';
+import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
 
 const VISIBLE_ROW_COUNT = 100;
 const ROW_HEIGHT = 17;
@@ -216,7 +249,8 @@ export default {
         TelemetryTableRow,
         TableColumnHeader,
         search,
-        TelemetryFilterIndicator
+        TelemetryFilterIndicator,
+        ToggleSwitch
     },
     inject: ['table', 'openmct', 'objectPath'],
     props: {
@@ -236,9 +270,16 @@ export default {
             'type': Boolean,
             'default': true
         },
-        enableMarking: {
+        marking: {
-            type: Boolean,
+            type: Object,
-            default: false
+            default() {
+                return {
+                    enable: false,
+                    useAlternateControlBar: false,
+                    rowName: '',
+                    rowNamePlural: ""
+                }
+            }
         }
     },
     data() {
@@ -270,7 +311,8 @@ export default {
             scrollW: 0,
             markCounter: 0,
             paused: false,
-            markedRows: []
+            markedRows: [],
+            isShowingMarkedRowsOnly: false
         }
     },
     computed: {
@@ -317,6 +359,7 @@ export default {
         this.table.on('object-removed', this.removeObject);
         this.table.on('outstanding-requests', this.outstandingRequests);
         this.table.on('refresh', this.clearRowsAndRerender);
+        this.table.on('historical-rows-processed', this.checkForMarkedRows);
 
         this.table.filteredRows.on('add', this.rowsAdded);
         this.table.filteredRows.on('remove', this.rowsRemoved);
@@ -631,18 +674,19 @@ export default {
         },
         unpause(unpausedByButton) {
             if (unpausedByButton) {
-                this.paused = false;
+                this.undoMarkedRows();
                 this.table.unpause();
-                this.markedRows = [];
+                this.paused = false;
                 this.pausedByButton = false;
             } else {
                 if (!this.pausedByButton) {
-                    this.paused = false;
+                    this.undoMarkedRows();
                     this.table.unpause();
-                    this.markedRows = [];
+                    this.paused = false;
                 }
             }
 
+            this.isShowingMarkedRowsOnly = false;
         },
         togglePauseByButton() {
             if (this.paused) {
@@ -655,24 +699,23 @@ export default {
             this.markedRows.forEach(r => r.marked = false);
             this.markedRows = [];
         },
-        unmarkRow(rowIndex, ctrlKeyModifier) {
+        unmarkRow(rowIndex) {
-            if (ctrlKeyModifier) {
+            if (this.markedRows.length > 1) {
                 let row = this.visibleRows[rowIndex],
                     positionInMarkedArray = this.markedRows.indexOf(row);
 
                 row.marked = false;
                 this.markedRows.splice(positionInMarkedArray, 1);
+            } else if (this.markedRows.length === 1) {
+                this.unmarkAllRows();
+            }
 
-                if (this.markedRows.length === 0) {
+            if (this.markedRows.length === 0) {
-                    this.unpause();
+                this.unpause();
-                }
-            } else if (this.markedRows.length) {
-                this.undoMarkedRows();
-                this.markRow(rowIndex);
             }
         },
         markRow(rowIndex, keyModifier) {
-            if (!this.enableMarking) {
+            if (!this.marking.enable) {
                 return;
             }
 
@@ -691,12 +734,13 @@ export default {
             this.markedRows[insertMethod](markedRow);
         },
         unmarkAllRows(skipUnpause) {
-            this.markedRows.forEach(row => row.marked = false);
+            this.undoMarkedRows();
-            this.markedRows = [];
+            this.isShowingMarkedRowsOnly = false;
             this.unpause();
+            this.restorePreviousRows();
         },
         markMultipleConcurrentRows(rowIndex) {
-            if (!this.enableMarking) {
+            if (!this.marking.enable) {
                 return;
             }
 
@@ -733,6 +777,34 @@ export default {
                     }
                 }
             }
+        },
+        checkForMarkedRows() {
+            this.markedRows = this.table.filteredRows.getRows().filter(row => row.marked);
+        },
+        showRows(rows) {
+            this.table.filteredRows.rows = rows;
+            this.table.filteredRows.emit('filter');
+        },
+        toggleMarkedRows(flag) {
+            if (flag) {
+                this.isShowingMarkedRowsOnly = true;
+                this.userScroll = this.scrollable.scrollTop;
+                this.allRows = this.table.filteredRows.getRows();
+
+                this.showRows(this.markedRows);
+                this.setHeight();
+            } else {
+                this.isShowingMarkedRowsOnly = false;
+                this.restorePreviousRows();
+            }
+        },
+        restorePreviousRows() {
+            if (this.allRows && this.allRows.length) {
+                this.showRows(this.allRows);
+                this.allRows = [];
+                this.setHeight();
+                this.scrollable.scrollTop = this.userScroll;
+            }
         }
     }
 }

src/styles/_constants-espresso.scss

@@ -120,7 +120,7 @@ $colorFilter: $colorFilterFg; // Standalone against $colorBodyBg
 
 // States
 $colorPausedBg: #ff9900;
-$colorPausedFg: #fff;
+$colorPausedFg: #333;
 $colorOk: #33cc33;
 
 // Base variations

src/styles/_constants-maelstrom.scss

@@ -124,7 +124,7 @@ $colorFilter: $colorFilterFg; // Standalone against $colorBodyBg
 
 // States
 $colorPausedBg: #ff9900;
-$colorPausedFg: #fff;
+$colorPausedFg: #333;
 $colorOk: #33cc33;
 
 // Base variations

src/styles/_constants.scss

@@ -147,6 +147,7 @@ $glyph-icon-filter: '\e926';
 $glyph-icon-filter-outline: '\e927';
 $glyph-icon-suitcase: '\e928';
 $glyph-icon-cursor-lock: '\e929';
+$glyph-icon-flag: '\e92a';
 $glyph-icon-arrows-right-left: '\ea00';
 $glyph-icon-arrows-up-down: '\ea01';
 $glyph-icon-bullet: '\ea02';
@@ -236,6 +237,7 @@ $glyph-icon-gauge: '\eb23';
 $glyph-icon-spectra: '\eb24';
 $glyph-icon-spectra-telemetry: '\eb25';
 $glyph-icon-command: '\eb26';
+$glyph-icon-conditional: '\eb27';
 
 /************************** GLYPHS AS DATA URI */
 // Only objects have been converted, for use in Create menu and folder views
@@ -285,3 +287,4 @@ $bg-icon-gauge: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w
 $bg-icon-spectra: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M384 352H128l51.2-89.6L0 288v127c0 53.3 43.7 97 97 97h318c53.4 0 97-43.7 97-97v-31l-162.9-93.1zM415 0H97C43.7 0 0 43.6 0 97v159l200-30.1 56-97.9 54.9 96H512V97a97.2 97.2 0 00-97-97zM512 320v-32l-192-32 192 64z'/%3e%3c/svg%3e");
 $bg-icon-spectra-telemetry: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M256 128l54.9 96H510C494.3 97.7 386.5 0 256 0 114.6 0 0 114.6 0 256l200-30.1zM384 352H128l51.2-89.6L2 287.7C17.6 414.1 125.4 512 256 512c100.8 0 188-58.3 229.8-143l-136.7-78.1zM320 256l192 64v-32l-192-32z'/%3e%3c/svg%3e");
 $bg-icon-command: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M185.1 229.7a96.5 96.5 0 0015.8 11.7A68.5 68.5 0 01192 208c0-19.8 8.9-38.8 25.1-53.7 18.5-17 43.7-26.3 70.9-26.3 20.1 0 39.1 5.1 55.1 14.6a81.3 81.3 0 00-16.2-20.3C308.4 105.3 283.2 96 256 96s-52.4 9.3-70.9 26.3C168.9 137.2 160 156.2 160 176s8.9 38.8 25.1 53.7z'/%3e%3cpath d='M442.7 134.8C422.4 57.5 346.5 0 256 0S89.6 57.5 69.3 134.8C26.3 174.8 0 228.7 0 288c0 123.7 114.6 224 256 224s256-100.3 256-224c0-59.3-26.3-113.2-69.3-153.2zM256 64c70.6 0 128 50.2 128 112s-57.4 112-128 112-128-50.2-128-112S185.4 64 256 64zm0 352c-87.7 0-159.2-63.9-160-142.7 34.4 47.4 93.2 78.7 160 78.7s125.6-31.3 160-78.7c-.8 78.8-72.3 142.7-160 142.7z'/%3e%3c/svg%3e");
+$bg-icon-conditional: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M256 0C114.62 0 0 114.62 0 256s114.62 256 256 256 256-114.62 256-256S397.38 0 256 0zm0 384L64 256l192-128 192 128z' fill='%23000000'/%3e%3c/svg%3e");

src/styles/_glyphs.scss

@@ -81,6 +81,7 @@
 .icon-filter-outline {  @include glyphBefore($glyph-icon-filter-outline); }
 .icon-suitcase {  @include glyphBefore($glyph-icon-suitcase); }
 .icon-cursor-lock {  @include glyphBefore($glyph-icon-cursor-lock); }
+.icon-flag {  @include glyphBefore($glyph-icon-flag); }
 .icon-arrows-right-left {  @include glyphBefore($glyph-icon-arrows-right-left); }
 .icon-arrows-up-down {  @include glyphBefore($glyph-icon-arrows-up-down); }
 .icon-bullet {  @include glyphBefore($glyph-icon-bullet); }
@@ -170,6 +171,7 @@
 .icon-spectra {  @include glyphBefore($glyph-icon-spectra); }
 .icon-spectra-telemetry {  @include glyphBefore($glyph-icon-spectra-telemetry); }
 .icon-command {  @include glyphBefore($glyph-icon-command); }
+.icon-conditional {  @include glyphBefore($glyph-icon-conditional); }
 
 /************************** 12 PX CLASSES */
 // TODO: sync with 16px redo as of 10/25/18
@@ -227,3 +229,4 @@
 .bg-icon-spectra { @include glyphBg($bg-icon-spectra); }
 .bg-icon-spectra-telemetry { @include glyphBg($bg-icon-spectra-telemetry); }
 .bg-icon-command { @include glyphBg($bg-icon-command); }
+.bg-icon-conditional { @include glyphBg($bg-icon-conditional); }

src/styles/_legacy.scss

@@ -28,6 +28,16 @@
     height: $controlBarH;
 }
 
+.c-control-bar {
+    display: flex;
+    align-items: center;
+
+    &__label {
+        display: inline-block;
+        white-space: nowrap;
+    }
+}
+
 .l-view-section {
     @include abs();
     overflow: auto;
@@ -52,236 +62,6 @@
     }
 }
 
-/******************************************************************* IMAGERY */
-.l-image-main-wrapper,
-.l-image-thumbs-wrapper,
-.image-main {
-    @include abs(0);
-    overflow: hidden;
-}
-
-/*************************************** MAIN LAYOUT */
-.l-image-main-wrapper {
-    // Imagery thumbs
-    bottom: $interiorMargin*2 +  $imageThumbsWrapperH;
-
-    min-width: 150px;
-    .l-image-main {
-        margin-bottom: $interiorMargin;
-    }
-    .l-image-main-controlbar {
-        &.l-flex-row { align-items: center; }
-    }
-}
-
-.l-image-thumbs-wrapper {
-    top: auto;
-    min-height: $imageThumbsWrapperH;
-    max-height: 60%;
-    box-sizing: border-box;
-}
-
-.l-date,
-.l-time,
-.l-timezone {
-    display: inline-block;
-}
-
-/*************************************** MAIN IMAGE */
-
-.image-main,
-.l-image-thumb-item .l-thumb {
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-.l-image-main-controlbar {
-    line-height: inherit;
-    .l-datetime-w, .l-controls-w {
-        direction: rtl;
-        overflow: hidden;
-    }
-    .l-datetime-w {
-        @include ellipsize();
-        margin-right: $interiorMarginSm;
-        text-align: left;
-    }
-    .l-controls-w {
-        z-index: 2;
-    }
-    .l-date,
-    .l-time {
-        color: pullForward($colorBodyFg, 20%); // TODO: do this as a theme constant
-    }
-    .l-mag {
-        direction: ltr;
-        display: inline-block;
-        &:before {
-            content: "\000049";
-        }
-    }
-    .s-mag {
-        color: pushBack($colorBodyFg, 20%); // TODO: do this as a theme constant
-    }
-    .l-btn.show-thumbs {
-        display: none;
-    }
-}
-
-.s-image-main {
-    background-color: $colorPlotBg;
-    border: 1px solid transparent;
-    &.paused {
-        //@include sUnsynced();
-    }
-}
-
-/*************************************** THUMBS */
-.l-image-thumbs-wrapper {
-    overflow-x: hidden;
-    overflow-y: auto;
-    padding-bottom: $interiorMargin;
-    white-space: nowrap;
-}
-
-.l-image-thumb-item {
-    transition: background-color 0.25s;
-    box-sizing: border-box;
-    cursor: pointer;
-    direction: ltr;
-    display: inline-block;
-    float: left;
-    padding: 1px;
-    margin-left: $interiorMarginSm;
-    position: relative;
-    text-align: left;
-    width: $imageThumbsD + $imageThumbPad*2;
-    white-space: normal;
-    .l-thumb,
-    .l-date,
-    .l-time {
-        display: inline-block;
-    }
-    .l-date,
-    .l-time {
-        padding: 2px 3px;
-    }
-
-    &:hover {
-        background: $colorThumbHoverBg;
-        .l-date,
-        .l-time {
-            color: #fff;
-        }
-    }
-    &.selected {
-        background: $colorKeySelectedBg;
-        .l-date,
-        .l-time {
-            color: #fff;
-        }
-    }
-    .l-thumb {
-        background-color: rgba(#fff, 0.1);
-        height: $imageThumbsD;
-        width: $imageThumbsD;
-        margin-top: 0;
-    }
-}
-
-/*************************************** LOCAL CONTROLS */
-.c-imagery {
-    display: contents;
-    .h-local-controls--overlay-content {
-        position: absolute;
-        right: $interiorMargin; top: $interiorMargin;
-        z-index: 2;
-        background: $colorLocalControlOvrBg;
-        border-radius: $basicCr;
-        max-width: 200px;
-        min-width: 100px;
-        width: 35%;
-        align-items: center;
-        padding: $interiorMargin $interiorMarginLg;
-
-        input[type="range"] {
-            display: block;
-            width: 100%;
-            &:not(:first-child) {
-                margin-top: $interiorMarginLg;
-            }
-
-            &:before {
-                margin-right: $interiorMarginSm;
-            }
-        }
-    }
-
-    &__lc {
-        &__reset-btn {
-            $bc: $scrollbarTrackColorBg;
-            &:before,
-            &:after {
-                border-right: 1px solid $bc;
-                content:'';
-                display: block;
-                width: 5px;
-                height: 4px;
-            }
-
-            &:before {
-                border-top: 1px solid $bc;
-                margin-bottom: 2px;
-            }
-
-            &:after {
-                border-bottom: 1px solid $bc;
-                margin-top: 2px;
-            }
-        }
-    }
-}
-
-
-/*************************************** WHEN IN FRAME */
-.c-frame .t-imagery {
-    .l-image-main-wrapper {
-        bottom: 0 !important;
-        height: 100% !important;
-        .l-image-main-controlbar .c-button {
-            //font-size: 0.7em;
-        }
-    }
-    .l-image-thumbs-wrapper,
-    mct-splitter {
-        display: none;
-    }
-}
-
-/*************************************** MOBILE */
-body.mobile.phone {
-    .t-imagery {
-        .l-image-main-wrapper,
-        .l-image-thumbs-wrapper {
-            min-height: 10px !important;
-        }
-    }
-}
-
-.c-button.pause-play {
-    // Pause icon set by default in markup
-
-    &.is-paused {
-        background: $colorPausedBg !important;
-        color: $colorPausedFg;
-
-        &:before {
-            content: $glyph-icon-play;
-        }
-    }
-}
-
 /*********************************************************************** CLOCKS AND TIMERS */
 .c-clock,
 .c-timer {

src/styles/fonts/Open MCT Symbols 16px.json

@@ -2,7 +2,7 @@
   "metadata": {
     "name": "Open MCT Symbols 16px",
     "lastOpened": 0,
-    "created": 1574106570211
+    "created": 1581619121103
   },
   "iconSets": [
     {
@@ -343,13 +343,21 @@
           "code": 59689,
           "tempChar": ""
         },
+        {
+          "order": 176,
+          "id": 150,
+          "name": "icon-flag",
+          "prevSize": 24,
+          "code": 59690,
+          "tempChar": ""
+        },
         {
           "order": 27,
           "id": 105,
           "name": "icon-arrows-right-left",
           "prevSize": 24,
           "code": 59904,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 26,
@@ -357,7 +365,7 @@
           "name": "icon-arrows-up-down",
           "prevSize": 24,
           "code": 59905,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 68,
@@ -365,7 +373,7 @@
           "name": "icon-bullet",
           "prevSize": 24,
           "code": 59906,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 150,
@@ -373,7 +381,7 @@
           "prevSize": 24,
           "code": 59907,
           "name": "icon-calendar",
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 45,
@@ -381,7 +389,7 @@
           "name": "icon-chain-links",
           "prevSize": 24,
           "code": 59908,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 73,
@@ -389,7 +397,7 @@
           "name": "icon-download",
           "prevSize": 24,
           "code": 59909,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 39,
@@ -397,7 +405,7 @@
           "name": "icon-duplicate",
           "prevSize": 24,
           "code": 59910,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 50,
@@ -405,7 +413,7 @@
           "name": "icon-folder-new",
           "prevSize": 24,
           "code": 59911,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 138,
@@ -413,7 +421,7 @@
           "name": "icon-fullscreen-collapse",
           "prevSize": 24,
           "code": 59912,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 139,
@@ -421,7 +429,7 @@
           "name": "icon-fullscreen-expand",
           "prevSize": 24,
           "code": 59913,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 122,
@@ -429,7 +437,7 @@
           "name": "icon-layers",
           "prevSize": 24,
           "code": 59914,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 151,
@@ -437,7 +445,7 @@
           "name": "icon-line-horz",
           "prevSize": 24,
           "code": 59915,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 100,
@@ -445,7 +453,7 @@
           "name": "icon-magnify",
           "prevSize": 24,
           "code": 59916,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 99,
@@ -453,7 +461,7 @@
           "name": "icon-magnify-in",
           "prevSize": 24,
           "code": 59917,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 101,
@@ -461,7 +469,7 @@
           "name": "icon-magnify-out-v2",
           "prevSize": 24,
           "code": 59918,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 103,
@@ -469,7 +477,7 @@
           "name": "icon-menu",
           "prevSize": 24,
           "code": 59919,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 124,
@@ -477,7 +485,7 @@
           "name": "icon-move",
           "prevSize": 24,
           "code": 59920,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 7,
@@ -485,7 +493,7 @@
           "name": "icon-new-window",
           "prevSize": 24,
           "code": 59921,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 63,
@@ -493,7 +501,7 @@
           "name": "icon-paint-bucket-v2",
           "prevSize": 24,
           "code": 59922,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 15,
@@ -501,7 +509,7 @@
           "name": "icon-pencil",
           "prevSize": 24,
           "code": 59923,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 54,
@@ -509,7 +517,7 @@
           "name": "icon-pencil-edit-in-place",
           "prevSize": 24,
           "code": 59924,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 40,
@@ -517,7 +525,7 @@
           "name": "icon-play",
           "prevSize": 24,
           "code": 59925,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 125,
@@ -525,7 +533,7 @@
           "name": "icon-pause",
           "prevSize": 24,
           "code": 59926,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 119,
@@ -533,7 +541,7 @@
           "name": "icon-plot-resource",
           "prevSize": 24,
           "code": 59927,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 48,
@@ -541,7 +549,7 @@
           "name": "icon-pointer-left",
           "prevSize": 24,
           "code": 59928,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 47,
@@ -549,7 +557,7 @@
           "name": "icon-pointer-right",
           "prevSize": 24,
           "code": 59929,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 85,
@@ -557,7 +565,7 @@
           "name": "icon-refresh",
           "prevSize": 24,
           "code": 59930,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 55,
@@ -565,7 +573,7 @@
           "name": "icon-save",
           "prevSize": 24,
           "code": 59931,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 56,
@@ -573,7 +581,7 @@
           "name": "icon-save-as",
           "prevSize": 24,
           "code": 59932,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 58,
@@ -581,7 +589,7 @@
           "name": "icon-sine",
           "prevSize": 24,
           "code": 59933,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 113,
@@ -589,7 +597,7 @@
           "name": "icon-font",
           "prevSize": 24,
           "code": 59934,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 41,
@@ -597,7 +605,7 @@
           "name": "icon-thumbs-strip",
           "prevSize": 24,
           "code": 59935,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 146,
@@ -605,7 +613,7 @@
           "name": "icon-two-parts-both",
           "prevSize": 24,
           "code": 59936,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 145,
@@ -613,7 +621,7 @@
           "name": "icon-two-parts-one-only",
           "prevSize": 24,
           "code": 59937,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 82,
@@ -621,7 +629,7 @@
           "name": "icon-resync",
           "prevSize": 24,
           "code": 59938,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 86,
@@ -629,7 +637,7 @@
           "name": "icon-reset",
           "prevSize": 24,
           "code": 59939,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 61,
@@ -637,7 +645,7 @@
           "name": "icon-x-in-circle",
           "prevSize": 24,
           "code": 59940,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 84,
@@ -645,7 +653,7 @@
           "name": "icon-brightness",
           "prevSize": 24,
           "code": 59941,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 83,
@@ -653,7 +661,7 @@
           "name": "icon-contrast",
           "prevSize": 24,
           "code": 59942,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 87,
@@ -661,7 +669,7 @@
           "name": "icon-expand",
           "prevSize": 24,
           "code": 59943,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 89,
@@ -669,7 +677,7 @@
           "name": "icon-list-view",
           "prevSize": 24,
           "code": 59944,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 133,
@@ -677,7 +685,7 @@
           "name": "icon-grid-snap-to",
           "prevSize": 24,
           "code": 59945,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 132,
@@ -685,7 +693,7 @@
           "name": "icon-grid-snap-no",
           "prevSize": 24,
           "code": 59946,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 94,
@@ -693,7 +701,7 @@
           "name": "icon-frame-show",
           "prevSize": 24,
           "code": 59947,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 95,
@@ -701,7 +709,7 @@
           "name": "icon-frame-hide",
           "prevSize": 24,
           "code": 59948,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 97,
@@ -709,7 +717,7 @@
           "name": "icon-import",
           "prevSize": 24,
           "code": 59949,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 96,
@@ -717,7 +725,7 @@
           "name": "icon-export",
           "prevSize": 24,
           "code": 59950,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 114,
@@ -725,7 +733,7 @@
           "name": "icon-font-size",
           "prevSize": 24,
           "code": 59951,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 163,
@@ -733,7 +741,7 @@
           "name": "icon-clear-data",
           "prevSize": 24,
           "code": 59952,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 173,
@@ -741,7 +749,7 @@
           "name": "icon-history",
           "prevSize": 24,
           "code": 59953,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 144,
@@ -749,7 +757,7 @@
           "name": "icon-activity",
           "prevSize": 24,
           "code": 60160,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 104,
@@ -757,7 +765,7 @@
           "name": "icon-activity-mode",
           "prevSize": 24,
           "code": 60161,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 137,
@@ -765,7 +773,7 @@
           "name": "icon-autoflow-tabular",
           "prevSize": 24,
           "code": 60162,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 115,
@@ -773,7 +781,7 @@
           "name": "icon-clock",
           "prevSize": 24,
           "code": 60163,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 2,
@@ -781,7 +789,7 @@
           "name": "icon-database",
           "prevSize": 24,
           "code": 60164,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 3,
@@ -789,7 +797,7 @@
           "name": "icon-database-query",
           "prevSize": 24,
           "code": 60165,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 67,
@@ -797,7 +805,7 @@
           "name": "icon-dataset",
           "prevSize": 24,
           "code": 60166,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 59,
@@ -805,7 +813,7 @@
           "name": "icon-datatable",
           "prevSize": 24,
           "code": 60167,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 136,
@@ -813,7 +821,7 @@
           "name": "icon-dictionary",
           "prevSize": 24,
           "code": 60168,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 51,
@@ -821,7 +829,7 @@
           "name": "icon-folder",
           "prevSize": 24,
           "code": 60169,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 147,
@@ -829,7 +837,7 @@
           "name": "icon-image",
           "prevSize": 24,
           "code": 60170,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 4,
@@ -837,7 +845,7 @@
           "name": "icon-layout",
           "prevSize": 24,
           "code": 60171,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 24,
@@ -845,7 +853,7 @@
           "name": "icon-object",
           "prevSize": 24,
           "code": 60172,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 52,
@@ -853,7 +861,7 @@
           "name": "icon-object-unknown",
           "prevSize": 24,
           "code": 60173,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 105,
@@ -861,7 +869,7 @@
           "name": "icon-packet",
           "prevSize": 24,
           "code": 60174,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 126,
@@ -869,7 +877,7 @@
           "name": "icon-page",
           "prevSize": 24,
           "code": 60175,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 130,
@@ -877,7 +885,7 @@
           "name": "icon-plot-overlay",
           "prevSize": 24,
           "code": 60176,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 80,
@@ -885,7 +893,7 @@
           "name": "icon-plot-stacked",
           "prevSize": 24,
           "code": 60177,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 134,
@@ -893,7 +901,7 @@
           "name": "icon-session",
           "prevSize": 24,
           "code": 60178,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 109,
@@ -901,7 +909,7 @@
           "name": "icon-tabular",
           "prevSize": 24,
           "code": 60179,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 107,
@@ -909,7 +917,7 @@
           "name": "icon-tabular-lad",
           "prevSize": 24,
           "code": 60180,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 106,
@@ -917,7 +925,7 @@
           "name": "icon-tabular-lad-set",
           "prevSize": 24,
           "code": 60181,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 70,
@@ -925,7 +933,7 @@
           "name": "icon-tabular-realtime",
           "prevSize": 24,
           "code": 60182,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 60,
@@ -933,7 +941,7 @@
           "name": "icon-tabular-scrolling",
           "prevSize": 24,
           "code": 60183,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 131,
@@ -941,7 +949,7 @@
           "name": "icon-telemetry",
           "prevSize": 24,
           "code": 60184,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 108,
@@ -949,7 +957,7 @@
           "name": "icon-timeline",
           "prevSize": 24,
           "code": 60185,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 81,
@@ -957,7 +965,7 @@
           "name": "icon-timer",
           "prevSize": 24,
           "code": 60186,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 69,
@@ -965,7 +973,7 @@
           "name": "icon-topic",
           "prevSize": 24,
           "code": 60187,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 79,
@@ -973,7 +981,7 @@
           "name": "icon-box-with-dashed-lines-v2",
           "prevSize": 24,
           "code": 60188,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 90,
@@ -981,7 +989,7 @@
           "name": "icon-summary-widget",
           "prevSize": 24,
           "code": 60189,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 92,
@@ -989,7 +997,7 @@
           "name": "icon-notebook",
           "prevSize": 24,
           "code": 60190,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 168,
@@ -997,7 +1005,7 @@
           "name": "icon-tabs-view",
           "prevSize": 24,
           "code": 60191,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 117,
@@ -1005,7 +1013,7 @@
           "name": "icon-flexible-layout",
           "prevSize": 24,
           "code": 60192,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 166,
@@ -1013,7 +1021,7 @@
           "name": "icon-generator-sine",
           "prevSize": 24,
           "code": 60193,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 167,
@@ -1021,7 +1029,7 @@
           "name": "icon-generator-event",
           "prevSize": 24,
           "code": 60194,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 165,
@@ -1029,7 +1037,7 @@
           "name": "icon-gauge-v2",
           "prevSize": 24,
           "code": 60195,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 170,
@@ -1037,7 +1045,7 @@
           "name": "icon-spectra",
           "prevSize": 24,
           "code": 60196,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 171,
@@ -1045,7 +1053,7 @@
           "name": "icon-telemetry-spectra",
           "prevSize": 24,
           "code": 60197,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 172,
@@ -1053,7 +1061,15 @@
           "name": "icon-pushbutton",
           "prevSize": 24,
           "code": 60198,
-          "tempChar": ""
+          "tempChar": ""
+        },
+        {
+          "order": 174,
+          "id": 151,
+          "name": "icon-conditional",
+          "prevSize": 24,
+          "code": 60199,
+          "tempChar": ""
         }
       ],
       "id": 0,
@@ -1613,6 +1629,21 @@
             "icon-cursor-locked"
           ]
         },
+        {
+          "id": 150,
+          "paths": [
+            "M192 640h832l-192-320 192-320h-896c-70.606 0.215-127.785 57.394-128 127.979l-0 0.021v896h192z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "grid": 16,
+          "tags": [
+            "icon-flag"
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false
+        },
         {
           "id": 105,
           "paths": [
@@ -2771,6 +2802,21 @@
           "tags": [
             "icon-pushbutton"
           ]
+        },
+        {
+          "id": 151,
+          "paths": [
+            "M512 0c-282.76 0-512 229.24-512 512s229.24 512 512 512 512-229.24 512-512-229.24-512-512-512zM512 768l-384-256 384-256 384 256z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": [
+            "icon-conditional"
+          ]
         }
       ],
       "invisible": false,

src/styles/fonts/Open-MCT-Symbols-16px.svg

@@ -49,6 +49,7 @@
 <glyph unicode="&#xe927;" glyph-name="icon-filter-outline" d="M896 832h-768c-70.601-0.227-127.773-57.399-128-127.978v-768.022c0.227-70.601 57.399-127.773 127.978-128h768.022c70.601 0.227 127.773 57.399 128 127.978v768.022c-0.227 70.601-57.399 127.773-127.978 128h-0.022zM896-63.8h-256v383.8l192 192h-640l192-192v-384h-256v767.8h768z" />
 <glyph unicode="&#xe928;" glyph-name="icon-suitcase" d="M768 704c-0.080 70.66-57.34 127.92-127.993 128h-256.007c-70.66-0.080-127.92-57.34-128-127.993v-128.007h-64v-768h640v768h-64zM384 703.88l0.12 0.12 255.88-0.12v-127.88h-256zM0 512v-640c0.102-35.305 28.695-63.898 63.99-64h64.010v768h-64c-35.305-0.102-63.898-28.695-64-63.99v-0.010zM960 576h-64v-768h64c35.305 0.102 63.898 28.695 64 63.99v640.010c-0.102 35.305-28.695 63.898-63.99 64h-0.010z" />
 <glyph unicode="&#xe929;" glyph-name="icon-cursor-locked" horiz-adv-x="768" d="M704 512h-64v64c0 141.385-114.615 256-256 256s-256-114.615-256-256v0-64h-64c-35.301-0.113-63.887-28.699-64-63.989v-576.011c0.113-35.301 28.699-63.887 63.989-64h640.011c35.301 0.113 63.887 28.699 64 63.989v576.011c-0.113 35.301-28.699 63.887-63.989 64h-0.011zM256 576c0 70.692 57.308 128 128 128s128-57.308 128-128v0-64h-256zM533.4-64l-128 128-43-85-170.4 383.6 383.6-170.2-85-43 128-128z" />
+<glyph unicode="&#xe92a;" glyph-name="icon-flag" d="M192 192h832l-192 320 192 320h-896c-70.606-0.215-127.785-57.394-128-127.979v-896.021h192z" />
 <glyph unicode="&#xea00;" glyph-name="icon-arrows-right-left" d="M1024 320l-448-512v1024zM448 832l-448-512 448-512z" />
 <glyph unicode="&#xea01;" glyph-name="icon-arrows-up-down" d="M512 832l512-448h-1024zM0 256l512-448 512 448z" />
 <glyph unicode="&#xea02;" glyph-name="icon-bullet" d="M832 80c0-44-36-80-80-80h-480c-44 0-80 36-80 80v480c0 44 36 80 80 80h480c44 0 80-36 80-80v-480z" />
@@ -138,4 +139,5 @@
 <glyph unicode="&#xeb24;" glyph-name="icon-spectra" d="M768 128h-512l102.4 179.2-358.4-51.2v-254c0-106.6 87.4-194 194-194h636c106.8 0 194 87.4 194 194v62l-325.8 186.2zM830 832h-636c-106.6 0-194-87.2-194-194v-318l400 60.2 112 195.8 109.8-192h402.2v254c-0.227 107.052-86.948 193.773-193.978 194h-0.022zM1024 192v64l-384 64 384-128z" />
 <glyph unicode="&#xeb25;" glyph-name="icon-telemetry-spectra" d="M512 576l109.8-192h398.2c-31.4 252.6-247 448-508 448-282.8 0-512-229.2-512-512l400 60.2zM768 128h-512l102.4 179.2-354.4-50.6c31.2-252.8 246.8-448.6 508-448.6 201.6 0 376 116.6 459.6 286l-273.4 156.2zM640 320l384-128v64l-384 64z" />
 <glyph unicode="&#xeb26;" glyph-name="icon-pushbutton" d="M370.2 372.6c9.326-8.53 19.666-16.261 30.729-22.914l0.871-0.486c-11.077 19.209-17.664 42.221-17.8 66.76v0.040c0 39.6 17.8 77.6 50.2 107.4 37 34 87.4 52.6 141.8 52.6 40.2 0 78.2-10.2 110.2-29.2-8.918 15.653-19.693 29.040-32.268 40.482l-0.132 0.118c-37 34-87.4 52.6-141.8 52.6s-104.8-18.6-141.8-52.6c-32.4-29.8-50.2-67.8-50.2-107.4s17.8-77.6 50.2-107.4zM885.4 562.4c-40.6 154.6-192.4 269.6-373.4 269.6s-332.8-115-373.4-269.6c-86-80-138.6-187.8-138.6-306.4 0-247.4 229.2-448 512-448s512 200.6 512 448c0 118.6-52.6 226.4-138.6 306.4zM512 704c141.2 0 256-100.4 256-224s-114.8-224-256-224-256 100.4-256 224 114.8 224 256 224zM512 0c-175.4 0-318.4 127.8-320 285.4 68.8-94.8 186.4-157.4 320-157.4s251.2 62.6 320 157.4c-1.6-157.6-144.6-285.4-320-285.4z" />
+<glyph unicode="&#xeb27;" glyph-name="icon-conditional" d="M512 832c-282.76 0-512-229.24-512-512s229.24-512 512-512 512 229.24 512 512-229.24 512-512 512zM512 64l-384 256 384 256 384-256z" />
 </font></defs></svg>

src/ui/components/ToggleSwitch.vue

@@ -1,16 +1,25 @@
 <template>
-<label class="c-toggle-switch">
+<div class="c-toggle-switch">
-    <input
+    <label class="c-toggle-switch__control">
-        :id="id"
+        <input
-        type="checkbox"
+            :id="id"
-        :checked="checked"
+            type="checkbox"
-        @change="onUserSelect($event)"
+            :checked="checked"
+            @change="onUserSelect($event)"
+        >
+        <span class="c-toggle-switch__slider"></span>
+    </label>
+    <div
+        v-if="label && label.length"
+        class="c-toggle-switch__label"
     >
-    <span class="c-toggle-switch__slider"></span>
+        {{ label }}
-</label>
+    </div>
+</div>
 </template>
 
 <script>
+
 export default {
     inject: ['openmct'],
     props: {
@@ -18,6 +27,11 @@ export default {
             type: String,
             required: true
         },
+        label: {
+            type: String,
+            required: false,
+            default: ''
+        },
         checked: Boolean
     },
     methods: {
@@ -26,4 +40,5 @@ export default {
         }
     }
 }
+
 </script>

src/ui/components/toggle-switch.scss

@@ -2,15 +2,40 @@
     $d: 12px;
     $m: 2px;
     $br: $d/1.5;
-    cursor: pointer;
+    display: inline-flex;
-    overflow: hidden;
+    align-items: center;
-    display: inline;
     vertical-align: middle;
 
+    &__control,
+    &__label {
+        flex: 0 0 auto;
+    }
+
+    &__control {
+        cursor: pointer;
+        overflow: hidden;
+        display: block;
+    }
+
+    input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+
+        &:checked {
+            + .c-toggle-switch__slider {
+                background: $colorKey; // TODO: make discrete theme constants for these colors
+                &:before {
+                    transform: translateX(100%);
+                }
+            }
+        }
+    }
+
     &__slider {
+        // Sits within __switch
         background: $colorBtnBg; // TODO: make discrete theme constants for these colors
         border-radius: $br;
-        //box-shadow: inset rgba($colorBtnFg, 0.4) 0 0 0 1px;
         display: inline-block;
         height: $d + ($m*2);
         position: relative;
@@ -31,18 +56,9 @@
         }
     }
 
-    input {
+    &__label {
-        opacity: 0;
+        margin-left: $interiorMarginSm;
-        width: 0;
+        margin-right: $interiorMargin;
-        height: 0;
+        white-space: nowrap;
-
-        &:checked {
-            + .c-toggle-switch__slider {
-                background: $colorKey; // TODO: make discrete theme constants for these colors
-                &:before {
-                    transform: translateX(100%);
-                }
-            }
-        }
     }
 }

src/ui/layout/pane.scss

@@ -62,6 +62,8 @@
     }
 
     &[class*="--horizontal"] {
+        padding-left: $interiorMargin;
+        padding-right: $interiorMargin;
         &.l-pane--collapsed {
             padding-left: 0 !important;
             padding-right: 0 !important;
@@ -69,9 +71,11 @@
     }
 
     &[class*="--vertical"] {
+        padding-top: $interiorMargin;
+        padding-bottom: $interiorMargin;
         &.l-pane--collapsed {
             padding-top: 0 !important;
-            padding-top: 0 !important;
+            padding-bottom: 0 !important;
         }
     }
 
@@ -277,6 +281,9 @@
             /************************** Vertical Splitter Before */
             // Pane collapses downward. Used by Elements pool in Inspector
             &[class*="-before"] {
+                $m: $interiorMarginLg;
+                margin-top: $m;
+                padding-top: $m;
                 > .l-pane__handle {
                     top: 0;
                     transform: translateY(floor($splitterHandleD / -1));

src/ui/layout/tree-item.vue

@@ -2,7 +2,7 @@
 <li class="c-tree__item-h">
     <div
         class="c-tree__item"
-        :class="{ 'is-alias': isAlias, 'is-navigated-object': isNavigated }"
+        :class="{ 'is-alias': isAlias, 'is-navigated-object': navigated }"
     >
         <view-control
             v-model="expanded"
@@ -40,6 +40,8 @@
 import viewControl from '../components/viewControl.vue';
 import ObjectLabel from '../components/ObjectLabel.vue';
 
+const LOCAL_STORAGE_KEY__TREE_EXPANDED = 'mct-tree-expanded';
+
 export default {
     name: 'TreeItem',
     inject: ['openmct'],
@@ -54,12 +56,12 @@ export default {
         }
     },
     data() {
-        this.navigateToPath = this.buildPathString(this.node.navigateToParent)
+        this.navigateToPath = this.buildPathString(this.node.navigateToParent);
         return {
             hasChildren: false,
             isLoading: false,
             loaded: false,
-            isNavigated: this.navigateToPath === this.openmct.router.currentLocation.path,
+            navigated: this.navigateToPath === this.openmct.router.currentLocation.path,
             children: [],
             expanded: false
         }
@@ -75,7 +77,7 @@ export default {
         }
     },
     watch: {
-        expanded(isExpanded) {
+        expanded() {
             if (!this.hasChildren) {
                 return;
             }
@@ -86,6 +88,7 @@ export default {
                 this.composition.load().then(this.finishLoading);
                 this.isLoading = true;
             }
+            this.setLocalStorageExpanded(this.navigateToPath);
         }
     },
     mounted() {
@@ -107,6 +110,17 @@ export default {
         }
 
         this.openmct.router.on('change:path', this.highlightIfNavigated);
+
+        this.getLocalStorageExpanded();
+    },
+    beforeDestroy() {
+        /****
+            * calling this.setLocalStorageExpanded explicitly here because for whatever reason,
+            * the watcher on this.expanded is not triggering this.setLocalStorageExpanded(),
+            * even though Vue documentation states, "At this stage the instance is still fully functional."
+        *****/
+        this.expanded = false;
+        this.setLocalStorageExpanded();
     },
     destroyed() {
         this.openmct.router.off('change:path', this.highlightIfNavigated);
@@ -139,10 +153,40 @@ export default {
         },
         highlightIfNavigated(newPath, oldPath) {
             if (newPath === this.navigateToPath) {
-                this.isNavigated = true;
+                this.navigated = true;
             } else if (oldPath === this.navigateToPath) {
-                this.isNavigated = false;
+                this.navigated = false;
             }
+        },
+        getLocalStorageExpanded() {
+            let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
+
+            if (expandedPaths) {
+                expandedPaths = JSON.parse(expandedPaths);
+                this.expanded = expandedPaths.includes(this.navigateToPath);
+            }
+        },
+        // expanded nodes/paths are stored in local storage as an array
+        setLocalStorageExpanded() {
+            let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
+            expandedPaths = expandedPaths ? JSON.parse(expandedPaths) : [];
+
+            if (this.expanded) {
+                if (!expandedPaths.includes(this.navigateToPath)) {
+                    expandedPaths.push(this.navigateToPath);
+                }
+            } else {
+                // remove this node path and all children paths from stored expanded paths
+                expandedPaths = expandedPaths.filter(path => !path.startsWith(this.navigateToPath));
+            }
+
+            localStorage.setItem(LOCAL_STORAGE_KEY__TREE_EXPANDED, JSON.stringify(expandedPaths));
+        },
+        removeLocalStorageExpanded() {
+            let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
+            expandedPaths = expandedPaths ? JSON.parse(expandedPaths) : [];
+            expandedPaths = expandedPaths.filter(path => !path.startsWith(this.navigateToPath));
+            localStorage.setItem(LOCAL_STORAGE_KEY__TREE_EXPANDED, JSON.stringify(expandedPaths));
         }
     }
 }