WIP:

Preparing master for the next sprint v1.4.1-SNAPSHOT (#3508 )
Fix Imagery for VERVE #266 (#3507 )
2025-06-29 20:23:04 +00:00 · 2020-11-13 14:42:24 -08:00 · 2020-11-09 13:10:50 -08:00 · 2020-11-09 09:33:25 -08:00 · 2020-11-06 13:58:57 -08:00 · 2020-11-03 12:06:49 -08:00
23 changed files with 168 additions and 69 deletions
--- a/index.html
+++ b/index.html
@ -30,6 +30,38 @@
        <link rel="icon" type="image/png" href="dist/favicons/favicon-96x96.png" sizes="96x96" type="image/x-icon">
        <link rel="icon" type="image/png" href="dist/favicons/favicon-32x32.png" sizes="32x32" type="image/x-icon">
        <link rel="icon" type="image/png" href="dist/favicons/favicon-16x16.png" sizes="16x16" type="image/x-icon">
+        <style type="text/css">
+            @keyframes splash-spinner {
+                0% {
+                    transform: translate(-50%, -50%) rotate(0deg); }
+                100% {
+                    transform: translate(-50%, -50%) rotate(360deg); } }
+
+            #splash-screen {
+                background-color: black;
+                position: absolute;
+                top: 0; right: 0; bottom: 0; left: 0;
+                z-index: 10000;
+            }
+
+            #splash-screen:before {
+                animation-name: splash-spinner;
+                animation-duration: 0.5s;
+                animation-iteration-count: infinite;
+                animation-timing-function: linear;
+                border-radius: 50%;
+                border-color: rgba(255,255,255,0.25);
+                border-top-color: white;
+                border-style: solid;
+                border-width: 10px;
+                content: '';
+                display: block;
+                opacity: 0.25;
+                position: absolute;
+                left: 50%; top: 50%;
+                height: 100px; width: 100px;
+            }
+        </style>
    </head>
    <body>
    </body>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "openmct",
-  "version": "1.3.3-SNAPSHOT",
+  "version": "1.4.1-SNAPSHOT",
  "description": "The Open MCT core platform",
  "dependencies": {},
  "devDependencies": {
--- a/platform/commonUI/edit/src/creation/CreateAction.js
+++ b/platform/commonUI/edit/src/creation/CreateAction.js
@ -86,7 +86,7 @@ define(
                        })
                        .join('/');

-                window.location.href = url;
+                openmct.router.setHash(url);

                if (isFirstViewEditable(object.useCapability('adapter'))) {
                    openmct.editor.edit();
--- a/src/plugins/URLTimeSettingsSynchronizer/URLTimeSettingsSynchronizer.js
+++ b/src/plugins/URLTimeSettingsSynchronizer/URLTimeSettingsSynchronizer.js
@ -51,7 +51,7 @@ export default class URLTimeSettingsSynchronizer {
    initialize() {
        this.updateTimeSettings();

-        window.addEventListener('hashchange', this.updateTimeSettings);
+        this.openmct.router.on('change:hash', this.updateTimeSettings);
        TIME_EVENTS.forEach(event => {
            this.openmct.time.on(event, this.setUrlFromTimeApi);
        });
@ -59,7 +59,7 @@ export default class URLTimeSettingsSynchronizer {
    }

    destroy() {
-        window.removeEventListener('hashchange', this.updateTimeSettings);
+        this.openmct.router.off('change:hash', this.updateTimeSettings);
        this.openmct.off('start', this.initialize);
        this.openmct.off('destroy', this.destroy);

@ -69,7 +69,8 @@ export default class URLTimeSettingsSynchronizer {
        this.openmct.time.off('bounds', this.updateBounds);
    }

-    updateTimeSettings() {
+    updateTimeSettings(hash) {
+        // console.log('updateTimeSettings', hash);
        // Prevent from triggering self
        if (!this.isUrlUpdateInProgress) {
            let timeParameters = this.parseParametersFromUrl();
@ -177,7 +178,7 @@ export default class URLTimeSettingsSynchronizer {

        searchParams.set(SEARCH_TIME_SYSTEM, this.openmct.time.timeSystem().key);
        this.isUrlUpdateInProgress = true;
-        setAllSearchParams(searchParams);
+        setAllSearchParams(this.openmct, searchParams);
    }

    areTimeParametersValid(timeParameters) {
--- a/src/plugins/condition/components/conditionals.scss
+++ b/src/plugins/condition/components/conditionals.scss
@ -50,6 +50,7 @@
 .c-cs {
    display: flex;
    flex-direction: column;
+    flex: 1 1 auto;
    height: 100%;
    overflow: hidden;

--- a/src/plugins/folderView/components/grid-view.scss
+++ b/src/plugins/folderView/components/grid-view.scss
@ -11,6 +11,8 @@

    body.desktop & {
        flex-flow: row wrap;
+        align-content: flex-start;
+
        &__item {
            height: $gridItemDesk;
            width: $gridItemDesk;
--- a/src/plugins/goToOriginalAction/goToOriginalAction.js
+++ b/src/plugins/goToOriginalAction/goToOriginalAction.js
@ -39,7 +39,7 @@ export default class GoToOriginalAction {
                    .slice(1)
                    .join('/');

-                window.location.href = url;
+                this._openmct.router.setHash(url);
            });
    }
    appliesTo(objectPath) {
--- a/src/plugins/imagery/components/imagery-view-layout.scss
+++ b/src/plugins/imagery/components/imagery-view-layout.scss
@ -1,8 +1,8 @@
 .c-imagery {
    display: flex;
    flex-direction: column;
+    flex: 1 1 auto;
    overflow: hidden;
-    height: 100%;

    &:focus {
        outline: none;
@ -19,14 +19,10 @@
    }

    &__main-image {
-        &__bg,
-        &__image {
-            height: 100%;
-        }
-
        &__bg {
            background-color: $colorPlotBg;
            border: 1px solid transparent;
+            flex: 1 1 auto;

            &.unnsynced{
                @include sUnsynced();
@ -34,6 +30,7 @@
        }

        &__image {
+            @include abs(); // Safari fix
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
--- a/src/plugins/notebook/components/Notebook.vue
+++ b/src/plugins/notebook/components/Notebook.vue
@ -125,10 +125,11 @@ export default {
        Sidebar
    },
    data() {
+        const configuration = this.domainObject.configuration || {};
        return {
            defaultPageId: getDefaultNotebook() ? getDefaultNotebook().page.id : '',
            defaultSectionId: getDefaultNotebook() ? getDefaultNotebook().section.id : '',
-            defaultSort: this.domainObject.configuration.defaultSort,
+            defaultSort: configuration.defaultSort,
            focusEntryId: null,
            internalDomainObject: this.domainObject,
            search: '',
--- a/src/plugins/notebook/components/NotebookEmbed.vue
+++ b/src/plugins/notebook/components/NotebookEmbed.vue
@ -144,7 +144,7 @@ export default {
            }

            const url = new URL(link);
-            window.location.href = url.hash;
+            this.openmct.router.setHash(url.hash);
        },
        formatTime(unixTime, timeFormat) {
            return Moment.utc(unixTime).format(timeFormat);
--- a/src/plugins/remove/RemoveAction.js
+++ b/src/plugins/remove/RemoveAction.js
@ -76,7 +76,7 @@ export default class RemoveAction {
            .map(object => this.openmct.objects.makeKeyString(object.identifier))
            .join("/");

-        window.location.href = '#/browse/' + urlPath;
+        this.openmct.router.setHash(`#/browse/${urlPath}`);
    }

    removeFromComposition(parent, child) {
--- a/src/plugins/tabs/components/tabs.vue
+++ b/src/plugins/tabs/components/tabs.vue
@ -264,12 +264,12 @@ export default {
            let currentTabIndexInURL = getSearchParam(this.searchTabKey);

            if (index !== currentTabIndexInURL) {
-                setSearchParam(this.searchTabKey, index);
+                setSearchParam(this.openmct, this.searchTabKey, index);
                this.currentTabIndex = index;
            }
        },
        clearCurrentTabIndexFromURL() {
-            deleteSearchParam(this.searchTabKey);
+            deleteSearchParam(this.openmct, this.searchTabKey);
        }
    }
 };
--- a/src/styles/notebook.scss
+++ b/src/styles/notebook.scss
@ -25,6 +25,7 @@
    $headerFontSize: 1.3em;
    display: flex;
    flex-direction: column;
+    flex: 1 1 auto;
    overflow: hidden;
    height: 100%;

--- a/src/styles/vue-styles.scss
+++ b/src/styles/vue-styles.scss
@ -47,3 +47,7 @@
@import "../ui/toolbar/components/toolbar-checkbox.scss";
@import "./notebook.scss";
@import "../plugins/notebook/components/sidebar.scss";
+
+#splash-screen {
+     display: none;
+}
--- a/src/ui/components/ObjectLabel.vue
+++ b/src/ui/components/ObjectLabel.vue
@ -6,7 +6,6 @@
        'is-missing': observedObject.status === 'missing'
    }"
    draggable="true"
-    :href="objectLink"
    @dragstart="dragStart"
    @click="navigateOrPreview"
 >
@ -85,7 +84,11 @@ export default {
            if (this.openmct.editor.isEditing()) {
                event.preventDefault();
                this.preview();
+
+                return;
            }
+
+            this.openmct.router.setPath(this.objectLink);
        },
        preview() {
            if (this.previewAction.appliesTo(this.objectPath)) {
--- a/src/ui/components/object-frame.scss
+++ b/src/ui/components/object-frame.scss
@ -71,8 +71,8 @@
    }

    &__object-view {
+        display: flex;
        flex: 1 1 auto;
-        height: 0; // Chrome 73 overflow bug fix
        overflow: auto;

        .u-fills-container {
@ -84,6 +84,6 @@

 .l-angular-ov-wrapper {
    // This element is the recipient for object styling; cannot be display: contents
-    height: 100%;
+    flex: 1 1 auto;
    overflow: hidden;
 }
--- a/src/ui/layout/BrowseBar.vue
+++ b/src/ui/layout/BrowseBar.vue
@ -304,7 +304,7 @@ export default {
            this.openmct.contextMenu._showContextMenuForObjectPath(this.openmct.router.path, event.clientX, event.clientY);
        },
        goToParent() {
-            window.location.hash = this.parentUrl;
+            this.openmct.router.setHash(this.parentUrl);
        },
        toggleLock(flag) {
            this.openmct.objects.mutate(this.domainObject, 'locked', flag);
--- a/src/ui/layout/Layout.vue
+++ b/src/ui/layout/Layout.vue
@ -5,6 +5,11 @@
        'is-editing': isEditing
    }"
 >
+
+    <div
+        id="splash-screen"
+    ></div>
+
    <div
        class="l-shell__head"
        :class="{
--- a/src/ui/layout/layout.scss
+++ b/src/ui/layout/layout.scss
@ -228,8 +228,9 @@
    /******************************* MAIN AREA */
    &__main-container {
        // Wrapper for main views
+        display: flex;
        flex: 1 1 auto !important;
-        height: 0; // Chrome 73 overflow bug fix
+        height: 100%; // Chrome 73 overflow bug fix
        overflow: auto;
    }

@ -338,7 +339,6 @@

    &__start {
        flex: 1 1 auto;
-        //margin-right: $interiorMargin;
        min-width: 0; // Forces interior to compress when pushed on

        [class*='button'] {
@ -357,11 +357,6 @@

    &__nav-to-parent-button {
        // This is an icon-button
-        //$p: $interiorMargin;
-        //margin-right: $interiorMargin;
-        //padding-left: $p;
-        //padding-right: $p;
-
        .is-editing & {
            display: none;
        }
--- a/src/ui/layout/mct-tree.vue
+++ b/src/ui/layout/mct-tree.vue
@ -226,7 +226,7 @@ export default {
            return this.mainTreeHeight - this.ancestorsHeight;
        },
        showNoItems() {
-            return this.visibleItems.length === 0 && !this.activeSearch;
+            return this.visibleItems.length === 0 && !this.activeSearch && !this.isLoading;
        },
        showNoSearchResults() {
            return this.searchValue && this.searchResultItems.length === 0 && !this.searchLoading;
@ -276,7 +276,9 @@ export default {
        }
    },
    async mounted() {
-        this.initialize();
+        this.isLoading = true;
+
+        await this.initialize();

        let savedPath = this.getStoredTreePath();
        let rootComposition = await this.loadRoot();
@ -302,26 +304,15 @@ export default {
    destroyed() {
        window.removeEventListener('resize', this.handleWindowResize);
        this.stopObservingAncestors();
-        document.removeEventListener('readystatechange', this.setTreeTopMargin);
    },
    methods: {
-        initialize() {
+        async initialize() {
            this.searchService = this.openmct.$injector.get('searchService');
            window.addEventListener('resize', this.handleWindowResize);
-            this.readyStateCheck();
            this.backwardsCompatibilityCheck();
-        },
-        readyStateCheck() {
-            if (document.readyState !== 'complete') {
-                document.addEventListener('readystatechange', this.onReadyState);
-            } else {
-                this.onReadyState();
-            }
-        },
-        onReadyState() {
-            if (document.readyState === 'complete') {
-                this.calculateHeights();
-            }
+            await this.calculateHeights();
+
+            return;
        },
        backwardsCompatibilityCheck() {
            let oldTreeExpanded = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED__OLD));
@ -781,17 +772,44 @@ export default {
            return { height };
        },
        getElementStyleValue(el, style) {
+            if (!el) {
+                return;
+            }
+
            let styleString = window.getComputedStyle(el)[style];
            let index = styleString.indexOf('px');

            return Number(styleString.slice(0, index));
        },
        calculateHeights() {
-            this.mainTreeTopMargin = this.getElementStyleValue(this.$refs.mainTree, 'marginTop');
-            this.mainTreeHeight = this.$el.offsetHeight
-                - this.$refs.search.offsetHeight
-                - this.mainTreeTopMargin;
-            this.itemHeight = this.getElementStyleValue(this.$refs.dummyItem, 'height');
+            const RECHECK = 100;
+
+            return new Promise((resolve, reject) => {
+
+                let checkHeights = () => {
+                    let treeTopMargin = this.getElementStyleValue(this.$refs.mainTree, 'marginTop');
+                    if (
+                        this.$el
+                        && this.$refs.search
+                        && this.$refs.mainTree
+                        && this.$refs.dummyItem
+                        && this.$el.offsetHeight !== 0
+                        && treeTopMargin > 0
+                    ) {
+                        this.mainTreeTopMargin = treeTopMargin;
+                        this.mainTreeHeight = this.$el.offsetHeight
+                            - this.$refs.search.offsetHeight
+                            - this.mainTreeTopMargin;
+                        this.itemHeight = this.getElementStyleValue(this.$refs.dummyItem, 'height');
+
+                        resolve();
+                    } else {
+                        setTimeout(checkHeights, RECHECK);
+                    }
+                };
+
+                checkHeights();
+            });
        }
    }
 };
--- a/src/ui/router/ApplicationRouter.js
+++ b/src/ui/router/ApplicationRouter.js
@ -21,8 +21,8 @@
 *****************************************************************************/
 /*global module*/

-const LocationBar = require('location-bar');
 const EventEmitter = require('EventEmitter');
+const lodash = require('lodash');

 function paramsToObject(searchParams) {
    let params = {};
@ -61,7 +61,9 @@ class ApplicationRouter extends EventEmitter {
        super();
        this.routes = [];
        this.started = false;
-        this.locationBar = new LocationBar();
+
+        this.hashChanged = this.hashChanged.bind(this);
+        // this.setHash = lodash.debounce(this.setHash, 500);
    }

    /**
@ -74,14 +76,31 @@ class ApplicationRouter extends EventEmitter {

        this.started = true;

-        this.locationBar.onChange(p => this.handleLocationChange(p));
-        this.locationBar.start({
-            root: location.pathname
-        });
+        this.hashChanged();
+
+        window.addEventListener('hashchange', this.hashChanged);
+    }
+
+    getPathString() {
+        const hash = window.location.hash;
+        return hash.substring(1);
    }

    destroy() {
-        this.locationBar.stop();
+        window.removeEventListener(this.hashChanged);
+    }
+
+    hashChanged () {
+        const pathString = this.getPathString();
+        this.handleLocationChange(this.getPathString());
+        // const hasTimeSystem = pathString.includes('timeSystem=');
+        // if (hasTimeSystem) {
+            // console.log(location.hash);
+            // const currentState = history.state || {};
+            // history.pushState(currentState, 'hashchange', location.hash);
+        // }
+
+        // console.log('hashchanged', new Date().toISOString(), location.hash);
    }

    handleLocationChange(pathString) {
@ -186,7 +205,25 @@ class ApplicationRouter extends EventEmitter {
    }

    set(path, queryString) {
-        location.hash = `${path}?${queryString}`;
+        const hash = `${path}?${queryString}`;
+
+        this.setHash(hash);
+    }
+
+    setHash(hash) {
+        if (hash === location.hash) {
+            return;
+        }
+
+        console.log('setHash', new Date().toISOString(), hash);
+
+        if (hash.includes('timeSystem=')) {
+            location.hash = hash;
+        } else {
+            this.handleLocationChange(hash);
+        }
+
+        this.emit('change:hash', hash);
    }

    setQueryString(queryString) {
--- a/src/ui/router/Browse.js
+++ b/src/ui/router/Browse.js
@ -15,6 +15,7 @@ define([

        openmct.router.route(/^\/browse\/(.*)$/, (path, results, params) => {
            isRoutingInProgress = true;
+
            let navigatePath = results[1];
            navigateToPath(navigatePath, params.view);
            onParamsChanged(null, null, params);
--- a/src/utils/openmctLocation.js
+++ b/src/utils/openmctLocation.js
@ -29,25 +29,25 @@ import objectUtils from '../api/objects/object-utils.js';
 * hash section of the URL.
 */

-export function setSearchParam(paramName, paramValue) {
+export function setSearchParam(openmct, paramName, paramValue) {
    let url = getHashRelativeURL();

    url.searchParams.set(paramName, paramValue);
-    setLocationFromUrl(url);
+    setLocationFromUrl(openmct, url);
 }

-export function deleteSearchParam(paramName) {
+export function deleteSearchParam(openmct, paramName) {
    let url = getHashRelativeURL();

    url.searchParams.delete(paramName);
-    setLocationFromUrl(url);
+    setLocationFromUrl(openmct, url);
 }

 /**
 * Will replace all current search parameters with the ones defined in urlSearchParams
 * @param {URLSearchParams} paramMap
 */
-export function setAllSearchParams(newSearchParams) {
+export function setAllSearchParams(openmct, newSearchParams) {
    let url = getHashRelativeURL();

    Array.from(url.searchParams.keys()).forEach((key) => url.searchParams.delete(key));
@ -56,7 +56,7 @@ export function setAllSearchParams(newSearchParams) {
        url.searchParams.set(key, newSearchParams.get(key));
    });

-    setLocationFromUrl(url);
+    setLocationFromUrl(openmct, url);
 }

 export function getSearchParam(paramName) {
@ -75,7 +75,7 @@ export function getObjectPath() {
    return getHashRelativeURL().pathname;
 }

-export function setObjectPath(objectPath) {
+export function setObjectPath(openmct, objectPath) {
    let objectPathString;
    let url = getHashRelativeURL();

@ -92,15 +92,16 @@ export function setObjectPath(objectPath) {
    }

    url.pathname = objectPathString;
-    setLocationFromUrl(url);
+    setLocationFromUrl(openmct, url);
 }

 function isDomainObject(potentialObject) {
    return potentialObject.identifier === undefined;
 }

-function setLocationFromUrl(url) {
-    window.location.hash = `${url.pathname}${url.search}`;
+function setLocationFromUrl(openmct, url) {
+    console.log('setLocationFromUrl');
+    openmct.router.setHash(`${url.pathname}${url.search}`);
 }

 function getHashRelativeURL() {
Author	SHA1	Message	Date
Nikhil Mandlik	af846b82e4	WIP:	2020-11-13 14:42:24 -08:00
Shefali Joshi	b0203f2272	Preparing master for the next sprint v1.4.1-SNAPSHOT (#3508 )	2020-11-09 13:10:50 -08:00
Charles Hacskaylo	77b720d00d	Fix Imagery for VERVE #266 (#3507 ) * Fairly extensive refactoring to fix layout in Safari for VERVE #266 - VERY WIP at this time! - Many instances of `height: 100%` converted or amended to include `flex: 1 1 auto`; - Some high-use containers like `c-so-view__object-view` converted to use flex layout; - Views fixed generally for sub-object view, and specifically for Conditionals, Folder grid view and Imagery; - Imagery background image holder converted to use absolute positioning; - TODO: Notebook has a problem where the side nav pane isn't overlaying in Safari - it's a JS thing, c-drawer--push isn't be replaced with c-drawer--overlays as it should; * CSS and markup refactoring to support addition of 'suspect' telemetry - Remove commented code;	2020-11-09 09:33:25 -08:00
Deep Tailor	ba982671b2	Quick idea on a splash screen that will not increase load time (#3376 ) * New splash screen Co-authored-by: charlesh88 <charlesh88@gmail.com> Co-authored-by: Andrew Henry <akhenry@gmail.com>	2020-11-06 13:58:57 -08:00
Jamie V	5df7d92d64	[Navigation Tree] Fix tree loading issue (#3500 ) * added resize observer for FIRST load of mainTree * new Promise driven height calculation test * cleaning up code, sticking with promise height caclcuations * more cleanup * returning from the initialize function	2020-11-03 12:06:49 -08:00