diff --git a/.gitignore b/.gitignore index 3d231f100b..86b84da9b0 100644 --- a/.gitignore +++ b/.gitignore @@ -37,4 +37,7 @@ protractor/logs # npm-debug log npm-debug.log +# karma reports +report.*.json + package-lock.json diff --git a/platform/commonUI/general/res/templates/label.html b/platform/commonUI/general/res/templates/label.html index 2eb1aa9b69..c2cd4551b5 100644 --- a/platform/commonUI/general/res/templates/label.html +++ b/platform/commonUI/general/res/templates/label.html @@ -19,7 +19,13 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
-
+
+
+ +
{{model.name}}
diff --git a/src/plugins/displayLayout/components/TelemetryView.vue b/src/plugins/displayLayout/components/TelemetryView.vue index 2f7aa39bc1..fd84fac82b 100644 --- a/src/plugins/displayLayout/components/TelemetryView.vue +++ b/src/plugins/displayLayout/components/TelemetryView.vue @@ -31,10 +31,16 @@
+
+
+
{{ item.model.name }}
diff --git a/src/plugins/folderView/components/grid-view.scss b/src/plugins/folderView/components/grid-view.scss index e809dca574..00c97ecdc4 100644 --- a/src/plugins/folderView/components/grid-view.scss +++ b/src/plugins/folderView/components/grid-view.scss @@ -38,7 +38,15 @@ // Object is an alias to an original. [class*='__type-icon'] { @include isAlias(); - color: $colorIconAliasForKeyFilter; + } + } + + &.is-missing { + @include isMissing(); + + [class*='__type-icon'], + [class*='__details'] { + opacity: $opacityMissing; } } @@ -85,15 +93,14 @@ body.desktop & { $transOutMs: 300ms; flex-flow: column nowrap; - transition: background $transOutMs ease-in-out; + transition: $transOutMs ease-in-out; &:hover { - background: $colorItemBgHov; + filter: $filterItemHoverFg; transition: $transIn; .c-grid-item__type-icon { - filter: $colorKeyFilterHov; - transform: scale(1); + transform: scale(1.1); transition: $transInBounce; } } @@ -103,7 +110,7 @@ } &__controls { - align-items: start; + align-items: baseline; flex: 0 0 auto; order: 1; .c-info-button, @@ -115,7 +122,6 @@ font-size: floor($gridItemDesk / 3); margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%; order: 2; - transform: scale(0.9); transform-origin: center; transition: all $transOutMs ease-in-out; } diff --git a/src/plugins/folderView/components/list-item.scss b/src/plugins/folderView/components/list-item.scss index 264a259a08..d0c19136f5 100644 --- a/src/plugins/folderView/components/list-item.scss +++ b/src/plugins/folderView/components/list-item.scss @@ -1,37 +1,17 @@ /******************************* LIST ITEM */ .c-list-item { - &__name a { - display: flex; - - > * + * { margin-left: $interiorMarginSm; } - } - &__type-icon { - // Have to do it this way instead of using icon-* class, due to need to apply alias to the icon - color: $colorKey; - display: inline-block; - width: 1em; - margin-right:$interiorMarginSm; + color: $colorItemTreeIcon; } - &__name-value { + &__name { @include ellipsize(); } &.is-alias { // Object is an alias to an original. [class*='__type-icon'] { - &:after { - color: $colorIconAlias; - content: $glyph-icon-link; - font-family: symbolsfont; - display: block; - position: absolute; - text-shadow: rgba(black, 0.5) 0 1px 2px; - top: auto; left: -1px; bottom: 1px; right: auto; - transform-origin: bottom left; - transform: scale(0.65); - } + @include isAlias(); } } } diff --git a/src/plugins/folderView/components/list-view.scss b/src/plugins/folderView/components/list-view.scss index 90527e4313..bb4ba0ace8 100644 --- a/src/plugins/folderView/components/list-view.scss +++ b/src/plugins/folderView/components/list-view.scss @@ -13,7 +13,8 @@ cursor: pointer; &:hover { - background: $colorListItemBgHov; + background: $colorItemTreeHoverBg; + filter: $filterHov; transition: $transIn; } } diff --git a/src/plugins/plot/res/templates/mct-plot.html b/src/plugins/plot/res/templates/mct-plot.html index 335548f0f7..c9d58c85bc 100644 --- a/src/plugins/plot/res/templates/mct-plot.html +++ b/src/plugins/plot/res/templates/mct-plot.html @@ -28,17 +28,22 @@ ng-click="legend.set('expanded', !legend.get('expanded'));">
-
+
+ ng-class="{'is-cursor-locked': !!lockHighlightPoint }"> +
+ ng-class="{'is-missing': series.domainObject.status === 'missing'}" + ng-repeat="series in series track by $index" + >
- + {{ series.get('name') }}
-
+
+
Cursor locked to point
@@ -76,12 +84,15 @@ - - + @@ -134,7 +145,7 @@ {{option.name}} - +
@@ -22,14 +22,21 @@
-
-
- {{ currentTab.domainObject.name }} -
-
import ObjectView from '../../../ui/components/ObjectView.vue'; +import { + getSearchParam, + setSearchParam, + deleteSearchParam +} from 'utils/openmctLocation'; + var unknownObjectType = { definition: { @@ -71,26 +75,45 @@ export default { components: { ObjectView }, + props: { + isEditing: { + type: Boolean, + required: true + } + }, data: function () { + let keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier); + return { internalDomainObject: this.domainObject, currentTab: {}, + currentTabIndex: undefined, tabsList: [], setCurrentTab: true, isDragging: false, - allowDrop: false + allowDrop: false, + searchTabKey: `tabs.pos.${keyString}` }; }, + computed: { + allowEditing() { + return !this.internalDomainObject.locked && this.isEditing; + } + }, mounted() { if (this.composition) { this.composition.on('add', this.addItem); this.composition.on('remove', this.removeItem); this.composition.on('reorder', this.onReorder); this.composition.load().then(() => { - let currentTabIndex = this.domainObject.currentTabIndex; + let currentTabIndexFromURL = getSearchParam(this.searchTabKey); + let currentTabIndexFromDomainObject = this.internalDomainObject.currentTabIndex; - if (currentTabIndex !== undefined && this.tabsList.length > currentTabIndex) { - this.currentTab = this.tabsList[currentTabIndex]; + if (currentTabIndexFromURL !== null) { + this.setCurrentTabByIndex(currentTabIndexFromURL); + } else if (currentTabIndexFromDomainObject !== undefined) { + this.setCurrentTabByIndex(currentTabIndexFromDomainObject); + this.storeCurrentTabIndexInURL(currentTabIndexFromDomainObject); } }); } @@ -100,20 +123,29 @@ export default { document.addEventListener('dragstart', this.dragstart); document.addEventListener('dragend', this.dragend); }, + beforeDestroy() { + this.persistCurrentTabIndex(this.currentTabIndex); + }, destroyed() { this.composition.off('add', this.addItem); this.composition.off('remove', this.removeItem); this.composition.off('reorder', this.onReorder); this.unsubscribe(); + this.clearCurrentTabIndexFromURL(); document.removeEventListener('dragstart', this.dragstart); document.removeEventListener('dragend', this.dragend); }, methods:{ + setCurrentTabByIndex(index) { + if (this.tabsList[index]) { + this.currentTab = this.tabsList[index]; + } + }, showTab(tab, index) { if (index !== undefined) { - this.storeCurrentTabIndex(index); + this.storeCurrentTabIndexInURL(index); } this.currentTab = tab; @@ -133,6 +165,10 @@ export default { this.setCurrentTab = false; } }, + reset() { + this.currentTab = {}; + this.setCurrentTab = true; + }, removeItem(identifier) { let pos = this.tabsList.findIndex(tab => tab.domainObject.identifier.namespace === identifier.namespace && tab.domainObject.identifier.key === identifier.key @@ -144,6 +180,10 @@ export default { if (this.isCurrent(tabToBeRemoved)) { this.showTab(this.tabsList[this.tabsList.length - 1], this.tabsList.length - 1); } + + if (!this.tabsList.length) { + this.reset(); + } }, onReorder(reorderPlan) { let oldTabs = this.tabsList.slice(); @@ -154,7 +194,7 @@ export default { }, onDrop(e) { this.setCurrentTab = true; - this.storeCurrentTabIndex(this.tabsList.length); + this.storeCurrentTabIndexInURL(this.tabsList.length); }, dragstart(e) { if (e.dataTransfer.types.includes('openmct/domain-object-path')) { @@ -177,8 +217,19 @@ export default { updateInternalDomainObject(domainObject) { this.internalDomainObject = domainObject; }, - storeCurrentTabIndex(index) { + persistCurrentTabIndex(index) { this.openmct.objects.mutate(this.internalDomainObject, 'currentTabIndex', index); + }, + storeCurrentTabIndexInURL(index) { + let currentTabIndexInURL = getSearchParam(this.searchTabKey); + + if (index !== currentTabIndexInURL) { + setSearchParam(this.searchTabKey, index); + this.currentTabIndex = index; + } + }, + clearCurrentTabIndexFromURL() { + deleteSearchParam(this.searchTabKey); } } } diff --git a/src/plugins/tabs/tabs.js b/src/plugins/tabs/tabs.js index 83f41d9f6b..2c6ff70d78 100644 --- a/src/plugins/tabs/tabs.js +++ b/src/plugins/tabs/tabs.js @@ -42,20 +42,28 @@ define([ let component; return { - show: function (element) { + show: function (element, editMode) { component = new Vue({ el: element, components: { TabsComponent: TabsComponent.default }, + data() { + return { + isEditing: editMode + }; + }, provide: { openmct, domainObject, composition: openmct.composition.get(domainObject) }, - template: '' + template: '' }); }, + onEditModeChange(editMode) { + component.isEditing = editMode; + }, destroy: function (element) { component.$destroy(); component = undefined; diff --git a/src/styles/_constants-espresso.scss b/src/styles/_constants-espresso.scss index 3e3bbaf2db..d8d5253562 100644 --- a/src/styles/_constants-espresso.scss +++ b/src/styles/_constants-espresso.scss @@ -151,6 +151,10 @@ $browseFrameColor: pullForward($colorBodyBg, 10%); $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px; $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4); +$filterItemHoverFg: brightness(1.2) contrast(1.1); +$filterItemMissing: brightness(0.6) grayscale(1); +$opacityMissing: 0.5; +$borderMissing: 1px dashed $colorAlert !important; /************************************************** EDITING */ $editUIColor: $uiColor; // Base color diff --git a/src/styles/_constants-maelstrom.scss b/src/styles/_constants-maelstrom.scss index d72abb7f8e..6604c0b987 100644 --- a/src/styles/_constants-maelstrom.scss +++ b/src/styles/_constants-maelstrom.scss @@ -155,6 +155,10 @@ $browseFrameColor: pullForward($colorBodyBg, 10%); $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px; $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4); +$filterItemHoverFg: brightness(1.2) contrast(1.1); +$filterItemMissing: contrast(0.2); +$opacityMissing: 0.5; +$borderMissing: 1px dashed $colorAlert !important; /************************************************** EDITING */ $editUIColor: $uiColor; // Base color diff --git a/src/styles/_constants-snow.scss b/src/styles/_constants-snow.scss index 7f44128019..df0078b317 100644 --- a/src/styles/_constants-snow.scss +++ b/src/styles/_constants-snow.scss @@ -151,6 +151,10 @@ $browseFrameColor: pullForward($colorBodyBg, 10%); $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px; $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4); +$filterItemHoverFg: brightness(0.9); +$filterItemMissing: contrast(0.2); +$opacityMissing: 0.4; +$borderMissing: 1px dashed $colorAlert !important; /************************************************** EDITING */ $editUIColor: $uiColor; // Base color diff --git a/src/styles/_constants.scss b/src/styles/_constants.scss index 414b77c205..98b4e517e9 100755 --- a/src/styles/_constants.scss +++ b/src/styles/_constants.scss @@ -61,7 +61,7 @@ $plotXBarH: 35px; $plotLegendH: 20px; $plotLegendWidthCollapsed: 20%; $plotLegendWidthExpanded: 50%; -$plotSwatchD: 10px; +$plotSwatchD: 12px; $plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW); // 1: Top, 2: right, 3: bottom, 4: left $plotMinH: 95px; $controlBarH: 25px; diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss index 565295d6dd..f31fb39c62 100644 --- a/src/styles/_controls.scss +++ b/src/styles/_controls.scss @@ -420,9 +420,7 @@ select { margin: 1px 1px 0 0; padding: $interiorMargin $interiorMarginLg; white-space: nowrap; - --notchSize: 7px; - clip-path: polygon( 0% 0%, @@ -433,8 +431,12 @@ select { 0% 100% ); + > * + * { + margin-left: $interiorMargin; + } + @include hover() { - background: $colorBtnBgHov; + filter: $filterHov; } &.is-current { diff --git a/src/styles/_legacy-plots.scss b/src/styles/_legacy-plots.scss index a7969d0ea9..e02e449204 100644 --- a/src/styles/_legacy-plots.scss +++ b/src/styles/_legacy-plots.scss @@ -43,7 +43,9 @@ mct-plot { .c-plot, .gl-plot { - .s-status-taking-snapshot & { + overflow: hidden; + + .s-status-taking-snapshot & { .c-control-bar { display: none; } @@ -51,6 +53,17 @@ mct-plot { display: none; } } + + /*********************** MISSING ITEM INDICATORS */ + .is-missing__indicator { + display: none; + } + .is-missing { + @include isMissing(); + .is-missing__indicator { + font-size: 0.8em; + } + } } .c-plot { @@ -74,6 +87,7 @@ mct-plot { display: flex; flex: 1 1 auto; flex-direction: column; + overflow: hidden; } &--stacked { @@ -102,18 +116,17 @@ mct-plot { } } - .gl-plot { display: flex; position: relative; width: 100%; height: 100%; - min-height: $plotMinH; /*********************** AXIS AND DISPLAY AREA */ .plot-wrapper-axis-and-display-area { position: relative; flex: 1 1 auto; + min-height: $plotMinH; } .gl-plot-wrapper-display-area-and-x-axis { @@ -196,7 +209,6 @@ mct-plot { left: 0; top: 0; right: auto; bottom: 0; padding-left: 5px; text-orientation: mixed; - //overflow: hidden; writing-mode: vertical-lr; &:before { // Icon denoting configurability @@ -368,12 +380,6 @@ mct-plot { z-index: -10; .l-view-section { - //$m: $interiorMargin; - //top: $m !important; - //right: $m; - //bottom: $m; - //left: $m; - .s-status-timeconductor-unsynced .holder-plot { .t-object-alert.t-alert-unsynced { display: none; @@ -429,14 +435,18 @@ mct-plot { /****************** _LEGEND.SCSS */ .gl-plot-legend, .c-plot-legend { + overflow: hidden; + &__wrapper { // Holds view-control and both collapsed and expanded legends flex: 1 1 auto; - overflow: auto; // Prevents collapsed legend from forcing scrollbars on higher parent containers + height: 100%; + overflow: auto; + padding: 2px; } &__view-control { - padding-top: 2px; + padding-top: 4px; margin-right: $interiorMarginSm; } @@ -481,15 +491,21 @@ mct-plot { /***************** GENERAL STYLES, ALL STATES */ .plot-legend-item { // General styles for legend items, both expanded and collapsed legend states + > * + * { + margin-left: $interiorMarginSm; + } + .plot-series-color-swatch { - border-radius: $smallCr; + border-radius: 30%; //$smallCr; border: 1px solid $colorBodyBg; display: inline-block; + flex: 0 0 auto; height: $plotSwatchD; width: $plotSwatchD; } .plot-series-name { display: inline; + @include ellipsize(); } .plot-series-value { @@ -497,6 +513,16 @@ mct-plot { } } +.plot-series-swatch-and-name { + display: flex; + flex: 0 1 auto; + align-items: center; + + > * + * { + margin-left: $interiorMarginSm; + } +} + .plot-wrapper-expanded-legend { flex: 1 1 auto; } @@ -505,9 +531,6 @@ mct-plot { &.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; } &.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; } - &.plot-legend-collapsed .icon-cursor-lock::before { padding-right: 5px; } - &.plot-legend-expanded .icon-cursor-lock::before { padding-right: 5px; } - &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; } &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; } &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; } @@ -521,19 +544,13 @@ mct-plot { display: flex; align-items: center; justify-content: stretch; - &:not(:first-child) { - margin-left: $interiorMarginLg; - } + .plot-series-swatch-and-name, .plot-series-value { @include ellipsize(); flex: 1 1 auto; } - .plot-series-swatch-and-name { - margin-right: $interiorMarginSm; - } - .plot-series-value { text-align: left; } @@ -543,7 +560,7 @@ mct-plot { /***************** GENERAL STYLES, EXPANDED */ &.plot-legend-expanded { .gl-plot-legend { - // max-height: 70%; + max-height: 70%; } .plot-wrapper-expanded-legend { @@ -564,6 +581,11 @@ mct-plot { display: flex; flex: 1 1 auto; overflow: hidden; + + > .plot-legend-item + .plot-legend-item { + // Space between plot items + margin-left: $interiorMarginLg; + } } } } @@ -595,12 +617,17 @@ mct-plot { min-width: 0; flex: 1 1 auto; overflow-y: auto; + + > * + * { + // Space between plot items + margin-top: $interiorMarginSm; + } } .plot-legend-item { - margin-bottom: 1px; margin-left: 0; - flex-wrap: wrap; + flex-wrap: nowrap; .plot-series-swatch-and-name { + @include ellipsize(); flex: 0 1 auto; min-width: 20%; } @@ -654,3 +681,24 @@ mct-plot { display: inline-block !important; } } + +/*********************** CURSOR LOCK INDICATOR */ +[class*='c-state-indicator__alert-cursor-lock'] { + display: none; +} + +[class*='is-cursor-locked'] { + background: rgba($colorInfo, 0.1); + + [class*='c-state-indicator__alert-cursor-lock'] { + @include userSelectNone(); + color: $colorInfo; + display: block; + margin-right: $interiorMarginSm; + + &[class*='--verbose'] { + padding: $interiorMarginSm; + + } + } +} diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index ecf6ac5074..3da26cc316 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -117,6 +117,30 @@ } } +@mixin isMissing($absPos: false) { + // Common styles to be applied to tree items, object labels, grid and list item views + //opacity: 0.7; + //pointer-events: none; // Don't think we can do this, as disables title hover on icon element + + .is-missing__indicator { + display: block; + text-shadow: $colorBodyBg 0 0 2px; + color: $colorAlert; + font-family: symbolsfont; + + &:before { + content: $glyph-icon-alert-triangle; + } + } + + @if $absPos { + .is-missing__indicator { + position: absolute; + z-index: 3; + } + } +} + @mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) { background-image: linear-gradient(-45deg, rgba($c, $a) 25%, transparent 25%, diff --git a/src/styles/_table.scss b/src/styles/_table.scss index 24a78961b7..10724e6ff9 100644 --- a/src/styles/_table.scss +++ b/src/styles/_table.scss @@ -49,8 +49,6 @@ table { td { vertical-align: top; } - - a { color: $colorBtnMajorBg; } } .is-editing { diff --git a/src/styles/vue-styles.scss b/src/styles/vue-styles.scss index 2837d80e83..ded07743cf 100644 --- a/src/styles/vue-styles.scss +++ b/src/styles/vue-styles.scss @@ -13,7 +13,6 @@ @import "../plugins/filters/components/filters-view.scss"; @import "../plugins/filters/components/global-filters.scss"; @import "../plugins/flexibleLayout/components/flexible-layout.scss"; -@import "../plugins/folderView/components/grid-item.scss"; @import "../plugins/folderView/components/grid-view.scss"; @import "../plugins/folderView/components/list-item.scss"; @import "../plugins/folderView/components/list-view.scss"; diff --git a/src/ui/components/ObjectFrame.vue b/src/ui/components/ObjectFrame.vue index 6b6be28235..7a58c00eb0 100644 --- a/src/ui/components/ObjectFrame.vue +++ b/src/ui/components/ObjectFrame.vue @@ -24,13 +24,24 @@ class="c-so-view has-local-controls" :class="{ 'c-so-view--no-frame': !hasFrame, - 'has-complex-content': complexContent + 'has-complex-content': complexContent, + 'is-missing': domainObject.status === 'missing' }" >
+
+ +
{{ domainObject && domainObject.name }}
@@ -46,6 +57,9 @@ @click="expand" >
+
-
{{ observedObject.name }}
+ > + +
+
+ {{ observedObject.name }} +
diff --git a/src/ui/components/ObjectView.vue b/src/ui/components/ObjectView.vue index ab6777e37b..870cc34d4d 100644 --- a/src/ui/components/ObjectView.vue +++ b/src/ui/components/ObjectView.vue @@ -301,7 +301,7 @@ export default { objectPath= this.currentObjectPath || this.objectPath, parentObject = objectPath[1]; - return [browseObject, parentObject, this.currentObject].every(object => !object.locked); + return [browseObject, parentObject, this.currentObject].every(object => object && !object.locked); } } } diff --git a/src/ui/components/object-frame.scss b/src/ui/components/object-frame.scss index c4fc236e21..dd1d17f654 100644 --- a/src/ui/components/object-frame.scss +++ b/src/ui/components/object-frame.scss @@ -2,6 +2,10 @@ display: flex; flex-direction: column; + &.is-missing { + border: $borderMissing; + } + /*************************** HEADER */ &__header { flex: 0 0 auto; @@ -39,6 +43,15 @@ > .c-so-view__local-controls { top: $interiorMarginSm; right: $interiorMarginSm; } + + &.is-missing { + @include isMissing($absPos: true); + + .is-missing__indicator { + top: $interiorMargin; + left: $interiorMargin; + } + } } &__local-controls { diff --git a/src/ui/components/object-label.scss b/src/ui/components/object-label.scss index 32dabb94c5..3181f23a31 100644 --- a/src/ui/components/object-label.scss +++ b/src/ui/components/object-label.scss @@ -3,23 +3,38 @@ // Used mostly in trees and lists display: flex; align-items: center; - flex: 0 1 auto; + flex: 1 1 auto; overflow: hidden; white-space: nowrap; + > * + * { margin-left: $interiorMargin; } + &__name { @include ellipsize(); display: inline; } - &__type-icon, - &:before { + &__type-icon { // Type icon. Must be an HTML entity to allow inclusion of alias indicator. display: block; flex: 0 0 auto; font-size: 1.1em; - opacity: 0.6; - margin-right: $interiorMargin; + //margin-right: $interiorMargin; + } + + &.is-missing { + @include isMissing($absPos: true); + + [class*='__type-icon']:before, + [class*='__type-icon']:after{ + opacity: $opacityMissing; + } + + .is-missing__indicator { + right: -3px; + top: -3px; + transform: scale(0.7); + } } } @@ -27,6 +42,8 @@ border-radius: $controlCr; padding: $interiorMarginSm 1px; + > * + * { margin-left: $interiorMarginSm; } + &__name { display: inline; width: 100%; diff --git a/src/ui/inspector/ObjectName.vue b/src/ui/inspector/ObjectName.vue index 4fac5a027b..c10b6492bc 100644 --- a/src/ui/inspector/ObjectName.vue +++ b/src/ui/inspector/ObjectName.vue @@ -1,16 +1,24 @@
+
+ {{ series.get('name') }}